127+ Primitives
Gooey Input
InputsLiquid search input that dynamically detaches a viscous gooey bubble containing the search icon using an SVG feColorMatrix filter.
NewGooeySVG FilterSpring Motion
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/gooey-input.json"
Props
TypeScript props supported by <GooeyInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Type to search..." | Placeholder text displayed inside the search input. |
| collapsedWidth | number | 115 | Collapsed trigger pill width in pixels. |
| expandedWidth | number | 200 | Expanded search input width in pixels. |
| expandedOffset | number | 50 | Horizontal offset in pixels to separate the detached gooey bubble. |
| gooeyBlur | number | 5 | Gaussian blur standard deviation for the liquid gooey SVG filter. |
| value | string | — | Controlled value for the search query. |
| defaultValue | string | "" | Initial search query in uncontrolled mode. |
| onValueChange | (value: string) => void | — | Callback fired whenever the search text changes. |
| onOpenChange | (open: boolean) => void | — | Callback fired when the input expands or collapses. |
| disabled | boolean | false | Whether the input and trigger are disabled. |
| className | string | — | Optional custom CSS class for the root wrapper. |
| classNames | GooeyInputClassNames | — | Granular class names for root, filterWrap, buttonRow, trigger, input, and bubble. |
Key Features
- SVG `feGaussianBlur` and `feColorMatrix` liquid viscous bridge that separates as the bar expands.
- Spring-driven expansion with Framer Motion shared layout animation on the search icon.
- Automatic input auto-focus and search text reset on collapse.
- Fully customizable collapsed/expanded widths, offsets, and classNames.
- Supports both controlled and uncontrolled search input values.
Keyboard & Accessibility
- Uses native `type='search'` input with `enterKeyHint='search'` for mobile virtual keyboards.
- Keyboard accessible trigger button with high-contrast visible focus rings.
- Hides decorative filter SVG with `aria-hidden='true'`.
- Smooth collapse on blur when the search query is empty.