Gooey Toggle

Interactive

A segmented radio toggle whose active pill travels between options with a gooey liquid stretch, rendered through an SVG goo filter with a snappy leader and a softer follower spring.

Inspired by Skiper UI — Gooey Effect (free tier) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/gooey-toggle.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/gooey-toggle.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ display: "grid", placeItems: "center", width: "100%", minHeight: 320, background: "#0f0f10", borderRadius: 16 }}>
    <GooeyToggle
      defaultValue="week"
      options={[
        { value: "day", label: "Day", icon: <Sun /> },
        { value: "week", label: "Week", icon: <CalendarDays /> },
        { value: "month", label: "Month", icon: <CalendarRange /> },
      ]}
    />
  </div>

Props

GooeyToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">

Prop	Type	Default	Description
options*	GooeyToggleOption[]	—	Segments to choose between. Rendered as equal-width columns.
value	string	—	Controlled active value. Pair with `onValueChange`.
defaultValue	string	—	Uncontrolled initial value. Defaults to the first option.
onValueChange	(value: string) => void	—	Fires with the next value when the selection changes.
color	string	"#8b5cf6"	Indicator + focus-ring colour. Mirrors the site `--pb-violet` token.
size	"sm" \| "md"	"md"	Visual density.

npm dependencies

motion
lucide-react