Tabs

Horizontal tabs organize content into switchable panels. They support an active indicator and optional icons.

Basic Tabs

This is the overview panel. It shows a high-level summary of your project.

tsx

const [active, setActive] = useState("overview");

<Tabs
  tabs={[
    { label: "Overview", value: "overview" },
    { label: "Analytics", value: "analytics" },
    { label: "Settings", value: "settings" },
  ]}
  active={active}
  onChange={setActive}
/>

With Icons

Manage your content sources: RSS feeds, APIs, and manual imports.

tsx

<Tabs
  tabs={[
    { label: "Sources", value: "sources", icon: <DownloadIcon /> },
    { label: "Content", value: "content", icon: <EditIcon /> },
  ]}
  active={active}
  onChange={setActive}
/>

Props

Prop	Type	Default	Description	Required
tabs	`Array<{ label, value, icon? }>`	-	List of tab definitions	No
active	`string`	-	Currently active tab value	No
onChange	`(value: string) => void`	-	Callback when a tab is clicked	No

Usage Guidelines

Use tabs for content that belongs to the same context but needs separation.
Keep tab labels short (1-2 words) for scannability.
Icons reinforce meaning but are optional. Do not use icons alone without labels.
Do not nest tabs within tabs. Use a different navigation pattern if needed.