Tabs where the container smoothly resizes to each panel, panels crossfade with a slight scale, and a pill glides between triggers.
Quiet surfaces and sharp type.
npx shadcn@latest add https://hyperblur.dev/r/morph-tabs.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/morph-tabs.tsx.
import { MorphTabs } from "@/components/hyperblur/morph-tabs"
<MorphTabs tabs={[
{ id: "a", label: "Overview", content: <p>Short.</p> },
{ id: "b", label: "Details", content: <p>Much longer content…</p> },
]} />| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | { id: string; label: string; content: ReactNode }[] | required | Tab definitions. Each id must be unique. |
| defaultValue | string | Id of the tab selected first when uncontrolled. Defaults to the first tab. | |
| value | string | Id of the selected tab, for controlled use. Pair it with onChange. | |
| onChange | (value: string) => void | Called with the tab id when the selection changes. | |
| color | string | "#2f7bff" | Accent color of the sliding pill and focus ring. |