Components

Every component ships as a standalone shadcn registry item. Install individually or browse them all here.

GooeyTabs

An animated tab bar where a single gooey SVG blob morphs between the active pill tab and the expanded content panel. Supports automatic and manual height adjustment.

The HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content.

npx shadcn@latest add @gooui/gooey-tabs

Prop	Type	Default	Description
items	`{ id, label, content }[]`	—	Array of tab definitions.
defaultActiveId	`string`	—	Initially active tab ID.
color	`string`	—	Blob color (any CSS color).
tabWidth	`number`	100	Width per tab pill in px.
tabHeight	`number`	36	Height of tab pill in px.
gap	`number`	4	Gap between tabs in px.
panelHeight	`number`	—	Explicit content panel height.
maxPanelHeight	`number`	—	Max panel height with scroll.
width	`number`	—	Overall container width.

GooeyDialog

A bottom-pill dialog that springs open with an organic gooey merge effect. The pill trigger appears to melt upward into the expanded body using a scaleY(-1) SVG flip and spring physics.

npx shadcn@latest add @gooui/gooey-dialog

Prop	Type	Default	Description
open	`boolean`	—	Controlled open state.
onOpenChange	`(open: boolean) => void`	—	Open state change handler.
trigger	`React.ReactNode`	—	Trigger element rendered as the pill.
children	`React.ReactNode`	—	Dialog body content.
blobColor	`string`	"#8b5cf6"	Gooey blob color.
expandedWidth	`number`	360	Width of expanded body in px.
bodyMaxHeight	`number`	400	Max body height in px.
pillHeight	`number`	40	Pill trigger height in px.
showBackdrop	`boolean`	true	Show backdrop blur overlay.

GooeyButton

A button wrapped in a gooey SVG filter. Expands padding on hover for an organic, pulsing effect. Fully color-customizable.

npx shadcn@latest add @gooui/gooey-button

Prop	Type	Default	Description
children	`React.ReactNode`	—	Button content.
color	`string`	"#8b5cf6"	Background color.
textColor	`string`	"#fff"	Text color.
filterId	`string`	—	Custom SVG filter ID.

GooeyBadge

Small inline badges with gooey filter effect. Five semantic variants for status indicators.

Success

Error

Warning

Info

Neutral

npx shadcn@latest add @gooui/gooey-badge

Prop	Type	Default	Description
children	`React.ReactNode`	—	Badge content.
variant	`"success" \| "error" \| "warning" \| "info" \| "neutral"`	"neutral"	Semantic variant.
filterId	`string`	—	Custom SVG filter ID.