Searchbars

Three distinct interaction approaches: noisy and raw, translucent glass, and a collision between both styles.

Ink & Acid

Physical, heavy, high contrast, and block shadows. Ideal for drawing attention in bold interfaces.

Heavy, high-contrast search bar with block shadows, thick borders, and neon accents. Strong hover reactions.

SYSTEM: IDLE

Available configuration to customize the component.

Prop	Type	Default	Description
placeholder	string	"SCAN NETWORK..."	Placeholder text for the input
buttonText	string	"GO"	Text for the submit button
onSearch	(query: string) => void	—	Callback fired when the user presses Enter or clicks the GO button
className	string	—	Optional custom class name

Premium, spatial, and magnetic. Uses Inter as font, massive light shadows, and 3D mouse tracking.

Translucent glass search input with deep light shadows and 3D mouse tracking. Made for dark interfaces.

Available configuration to customize the component.

Prop	Type	Default	Description
placeholder	string	"Search the universe..."	Placeholder text for the search input
onSearch	(query: string) => void	—	Callback fired when the user presses Enter
className	string	—	Optional custom class name for the container
...props	HTMLAttributes	—	All standard HTML div attributes

A circular frosted glass node that expands dynamically with a side search bar. Uses forced Inter font.

Circular glass node that expands into a side search bar. Mixes solid weight with translucent lightness.

Available configuration to customize the component.

Prop	Type	Default	Description
placeholder	string	"..."	Placeholder text for the search input
maxWidth	number	400	Maximum width in pixels the searchbar can expand to
onSearch	(query: string) => void	—	Callback fired when the user presses Enter
className	string	—	Optional custom class name for the container
...props	HTMLAttributes	—	All standard HTML div attributes