Does the gooey effect blur the text?

No. The filter is applied to a background layer only, and text and icons are drawn above it, so the shapes melt together while the labels stay crisp.

How do I install Gooey?

Gooey is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/gooey. It copies gooey.tsx into components/ui and installs motion, clsx, tailwind-merge.

Is Gooey free for commercial use?

Gooey needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.

Does Gooey work with Next.js?

Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.

Can an AI coding agent install Gooey?

Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Gooey's props and get_install_command returns the exact command.

Gooey

Liquid UI: pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp. An SVG filter plus springs, so it works with any markup.

Category: Interactive
Licence: Charcoal UI Pro
Built with: React 19, Tailwind CSS 4, Motion
Dependencies: motion, clsx, tailwind-merge

Examples

Action menu

Actions drip out of the button and are pulled back in.

Liquid tabs

A lead drop and a lagging drop stretch into a bridge as the selection moves.

Split pill

Actions bud off the sides of a pill.

API reference

Prop	Type	Default	Description
`blur`	`number`	`7`	Gooey: how far shapes reach for each other, in px.
`contrast`	`number`	`20`	Gooey: edge sharpness of the merged goo.
`bounce`	`number`	`0.45`	Gooey: spring bounciness for items.
`stagger`	`number`	`0.04`	Gooey: seconds between items.
`x / y / scale`	`number`	—	GooeyItem: where the piece springs to.
`index`	`number`	`0`	GooeyItem: position in the stagger order.

About Gooey

Gooey makes pieces that touch melt into one another and stretch apart like goo, while text and icons stay perfectly crisp.

Gooey is an interactive effect for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.

When to use Gooey

Tabs and segmented controls.
Floating action menus.
Toggle switches.
Playful navigation.

How it works

An SVG blur and colour-matrix filter is applied to a background layer only, with content drawn above it.

Pointer effects have a keyboard or static equivalent, and nothing that matters depends on hover alone. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.

Customizing Gooey

Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.

The Customize panel next to the preview lets you change blur, contrast, bounce, stagger live, and the Code tab updates to match, so the snippet you copy already carries your values.

blur (number, default 7): Gooey: how far shapes reach for each other, in px.
contrast (number, default 20): Gooey: edge sharpness of the merged goo.
bounce (number, default 0.45): Gooey: spring bounciness for items.
stagger (number, default 0.04): Gooey: seconds between items.
x / y / scale (number): GooeyItem: where the piece springs to.
index (number, default 0): GooeyItem: position in the stagger order.

3 examples on this page

Action menu: Actions drip out of the button and are pulled back in.
Liquid tabs: A lead drop and a lagging drop stretch into a bridge as the selection moves.
Split pill: Actions bud off the sides of a pill.

Goes well with Gooey

These interactive pieces share its tokens and motion language, so they sit together on one page without clashing.

Hover Reveal List: A React hover reveal list: hovering a row floats its image beside the pointer
Pixel Grid: A React pixel grid: cells light up under the pointer and fade slowly
Draggable Cards: React draggable cards: polaroids scattered on a table you can pick up
Image Accordion: A React image accordion: the hovered panel expands to reveal its caption
Velocity Marquee: A React velocity marquee: big text that speeds up and flips with scroll

Install Gooey

npx shadcn@latest add @charcoal/gooey

Gooey is part of Charcoal UI Pro. One seat unlocks all 300 Pro components, 107 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies gooey.tsx into components/ui and installs clsx, tailwind-merge.

You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.

See Charcoal UI Pro pricing · Pro setup

Frequently asked questions

Does the gooey effect blur the text?: No. The filter is applied to a background layer only, and text and icons are drawn above it, so the shapes melt together while the labels stay crisp.
How do I install Gooey?: Gooey is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/gooey. It copies gooey.tsx into components/ui and installs motion, clsx, tailwind-merge.
Is Gooey free for commercial use?: Gooey needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
Does Gooey work with Next.js?: Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
Can an AI coding agent install Gooey?: Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Gooey's props and get_install_command returns the exact command.

Gooey as Markdown · llms.txt