Gooey Input

A search-style input that expands with a gooey SVG filter and shared layout animation

Installation

npx shadcn@latest add @aceternity/gooey-input

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.

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