Deploy statusBuilding…
README · 4 min read
<GooeyTabs variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion, plus the Ovio theme, world, motion, keys, goo-filter items.
npx shadcn add JanaSundar/ovio/gooey-tabs↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { GooeyTabs } from "@/components/ovio/gooey-tabs/gooey-tabs"
<GooeyTabs
variant="minimal"
tabs={["Overview", "Commits", "Issues", "Releases"]}
/>Built with: SVG goo filter · Motion for React (Toy: spring drag)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| variant | | "minimal" | "craft" | "retro" | "toy" | Which world to render. Defaults to the nearest OvioProvider, then minimal. |
| tabs | string[] | Equal-width tabs. |
| value / defaultValue | number | Selected index, controlled or not. |
| onValueChange | (index: number) => void | Fires when a tab is chosen. |
| status | | "offline" | "building" | "online" | Deploy indicator. Hidden when left out. |
| panels | ReactNode[] | Panel content per tab. |
| goo | number | Blur strength of the filter. Default 9. |
| className | string | Merged onto the root. |