Glow Search

A dark search bar with light leaking from two corners and a soft halo that brightens on focus. A filter button sits on the right.

Customize

placeholder

glowFrom

glowTo

width300pxlabel

9 properties

Property	Type	Default	Description
placeholder	string	`"Search..."`	Hint in the empty field.
onSearch	(query: string) => void	—	Called with the text when Enter is pressed.
onFilterClick	() => void	—	Called when the filter button is pressed.
showFilter	boolean	`true`	Show the filter button.
glowFrom	string	`"#ffffff"`	Glow from the top-left corner.
glowTo	string	`"#8a8a8a"`	Glow from the bottom-right corner.
width	number	`300`	Bar width in pixels.
label	string	`"Search"`	Accessible name of the field.
className	string	—	Classes for the wrapper.

2 required packages

npm install clsx tailwind-merge