Gooey Input
A search-style input that expands with a gooey SVG filter and shared layout animation
Installation
Run the following command
npx shadcn@latest add @aceternity/gooey-inputProps
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Type to search..." | Placeholder shown in the input. |
className | string | — | Classes on the outer wrapper. |
classNames | GooeyInputClassNames | — | Optional classes for inner parts (root, filterWrap, buttonRow, trigger, input, bubble, bubbleSurface). |
collapsedWidth | number | 115 | Width of the control when collapsed (px). |
expandedWidth | number | 200 | Width when expanded (px). |
expandedOffset | number | 50 | Left margin when expanded; lines up the detached icon bubble (px). |
gooeyBlur | number | 5 | Blur strength for the gooey SVG filter. |
value | string | — | Controlled value. Omit for uncontrolled usage. |
defaultValue | string | "" | Initial value when uncontrolled. |
onValueChange | (value: string) => void | — | Called when the text changes. |
onOpenChange | (open: boolean) => void | — | Called when the field expands or collapses. |
disabled | boolean | false | Disables interaction. |
This component is inspired by Gooey Effect by Chris Coyier and Gooey Search by oguzhantufenk.
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
