06Shipped
Tabs
Section switching for grouped content panels. Radix-powered.
Import
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@charply/design"Variants
Default tabs
3 reply options ready
Pick one, save it, or insert it.
Guidelines
docs/design/components/tabs.mdDo
- ✓Use `defaultValue` for uncontrolled tabs (most cases).
- ✓Keep tab labels short (1–2 words) to avoid overflow.
Don't
- ✗Use tabs for wizard/sequential steps — use a stepper pattern instead.
- ✗Put more than 5 tabs in a single `TabsList`.
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.