Colors — click to switch
4 fill colors
Sizes
size="sm" · size="md" (default) · size="lg"
With content panel
Tabs controlling a content area below
Overview content — summary stats, recent activity.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | string[] | {value, label}[] | [] | Tab definitions. Strings auto-convert to {value, label}. |
| value | string | — | Controlled active tab value. |
| defaultValue | string | tabs[0] | Initial active tab for uncontrolled use. |
| onChange | (value: string) => void | — | Called when active tab changes. |
| color | "lime"|"violet"|"pink"|"yellow" | "lime" | Active tab fill color. |
| size | "sm"|"md"|"lg" | "md" | Tab button size. sm = compact, md = default, lg = prominent. |
Usage
import { Tabs } from "components/feedback/Tabs";
// Uncontrolled
<Tabs tabs={["Overview", "Analytics", "Settings"]} />
// Controlled + content panel
<Tabs
tabs={["Overview", "Analytics"]}
value={activeTab}
onChange={setActiveTab}
color="violet"
/>
{activeTab === "Overview" && <Overview />}
{activeTab === "Analytics" && <Analytics />}