Gooey

shadcn/ui, melted.

22 components. One command.

$ npx shadcn@latest add https://gooey-shyt.vercel.app/r/all.json

Toggles

Flip it and it pours. Knobs stretch across their track, dots drip to their new home, and pressed toggles fuse into one shape.

Switch. The knob pulls away from where it was and the trailing drop is absorbed on arrival.

switch

Default

Comfortable

Compact

Radio group. The selected dot travels to the next option as a single droplet.

radio-group

Toggle group. One pill pours between items. In multiple mode, pressed neighbours melt together.

toggle-group

Menus

Highlights with a little drag. Every menu pinches off its trigger when it opens and drains back into it when it closes.

Dropdown menu. Open it and move through the items.

dropdown-menu

Right click here

Context menu. Right-click the area.

context-menu

Select. The blob scrolls with the viewport.

select

Combobox. Stays on the right item as the list filters.

combobox

Menubar. The same highlight inside each menu.

menubar

Values

Numbers that move with weight. The thumb springs ahead of its fill, progress sheds a droplet, and the spinner never stops merging.

Slider. Click the track: the thumb leaps and the fill catches up. Dragging stays 1:1.

slider

Progress. A droplet at the leading edge pinches off and re-merges.

progress

Spinner. Three dots fusing in turn, on CSS so it keeps going while the page is busy.

spinner

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Input OTP. The focus halo hops from slot to slot as you type.

input-otp

Overlays

Bubbles that bud. Tooltips, popovers and hover cards grow out of a droplet on the trigger side, then let go when they close.

Tooltip. Hover a trigger. Fast enough to use all day.

tooltip

Popover. The card absorbs the droplet as it opens.

popover

Hover card. The same bud, on hover.

hover-card

Display

Dates and dots that flow. Selections pour from day to day, a range becomes one capsule, and carousel dots stretch as slides change.

September 2026

Calendar. Single and range selection. Watch a range cross into the next week.

calendar

Carousel. New CarouselDots: the active dot stretches between positions.

carousel

Buttons and chat

Buttons that spill over. An action word blooms out of its label, a hover blob crosses the seams, and new messages grow out of a drop.

Reveal button. Two pills bloom and fuse behind an action word.

gooey-button

Button group. A hover blob travels across the seams.

button-group

Are we still on for the review?

Chat bubble. Send one: it grows out of a droplet at the tail corner.

bubble

Recipe

Two ingredients. A blur that fuses shapes that come close, and springs that pull them apart at different speeds.

Blur radius

σ 2px

feGaussianBlurat 14px type, scaled with size

Alpha threshold

19 · −9

feColorMatrixblurred edges snap to solid

Leader spring

266 / 15

stiffness · dampingovershoots just enough to stretch

Text in the filter

sibling layerlabels never blur or jag

Install

Take it home. Each one replaces its shadcn counterpart in place, with the same props and exports.

$ npx shadcn@latest add https://gooey-shyt.vercel.app/r/all.json

switch

/r/switch.json

radio-group

/r/radio-group.json

toggle-group

/r/toggle-group.json

tabs

/r/tabs.json

pagination

/r/pagination.json

dropdown-menu

/r/dropdown-menu.json

context-menu

/r/context-menu.json

select

/r/select.json

combobox

/r/combobox.json

menubar

/r/menubar.json

slider

/r/slider.json

progress

/r/progress.json

spinner

/r/spinner.json

input-otp

/r/input-otp.json

tooltip

/r/tooltip.json

popover

/r/popover.json