Magic Tab

A segmented tab bar where the selected option lifts into a 3D button with an optional rainbow edge.

Installation

pnpm dlx shadcn@latest add @godui/magic-tab

Requires the @godui namespace in your components.json (one-time setup):

{  "registries": {    "@godui": "https://godui.design/r/{name}.json"  }}

Usage

import { MagicTab } from "@/components/godui/magic-tab";

const items = [
  { value: "overview", label: "Overview" },
  { value: "analytics", label: "Analytics" },
  { value: "reports", label: "Reports" },
];

<MagicTab items={items} defaultValue="overview" />;

Use it controlled by passing value and onValueChange:

const [value, setValue] = useState("overview");

<MagicTab items={items} value={value} onValueChange={setValue} />;

Examples

Secondary

Without rainbow

Disabled tab

Mark any item disabled to skip it.

Sizes

Props

Prop	Type	Default	Description
`items`	`MagicTabItem[]`	—	Tabs to render: `{ value, label, disabled? }`
`value`	`string`	—	Controlled selected value
`defaultValue`	`string`	first enabled item	Uncontrolled initial value
`onValueChange`	`(value: string) => void`	—	Called when the selected tab changes
`variant`	`"default" \| "secondary"`	`"default"`	Selected-tab color scheme
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tab padding and text size
`rainbow`	`boolean`	`true`	Animate the selected tab's 3D edge and shadow with a rainbow gradient

Magic Tab

On this page