shadcn.io is an independent project built on shadcn/ui
The title is Project Details, with the line View and manage project information. Overview, Activity, and Settings are tabs, and Overview's paragraph is the one showing.
Use it when one record has a few views that share a panel. An Accordion fits if more than one section should stay open. In React, Ark UI does not switch this tab text.
Installation
Anatomy
Usage
<Sheet>
<SheetTrigger asChild>
<Button>Open Sheet</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Project Details</SheetTitle>
<SheetDescription>View and manage project information</SheetDescription>
</SheetHeader>
<Tabs className="p-4" defaultValue="overview">
<TabsList variant="line">
{TABS.map((tab) => (
<TabsTrigger key={tab.id} value={tab.id}>
{tab.label}
</TabsTrigger>
))}
</TabsList>
{TABS.map((tab) => (
<TabsContent
className="text-muted-foreground text-sm"
key={tab.id}
value={tab.id}
>
{tab.content}
</TabsContent>
))}
</Tabs>
</SheetContent>
</Sheet>FAQ
How are the tabs built?
With Tabs, TabsList, TabsTrigger and TabsContent, mapped from a static array of three tabs. Overview is the default tab.
TabsList uses variant="line", and each trigger and panel share a value.
How do people move between tabs with the keyboard?
Tab moves focus onto the selected tab, and the arrow keys move between tabs. Tab again moves into the panel.
How do I open the sheet on a given tab?
Control the tabs: keep the value in state, set it before you open the sheet, and update it on change.
Pass value and read details.value in onValueChange.
What's in each tab?
One paragraph of muted text per tab. Replace it with the real panel: a member list, an activity feed, a settings form.
API Reference
Sheet
Sets asChild. The rest is on the Sheet page.
Button
No extra props in this demo. The rest is on the Button page.
Tabs
Sets defaultValue="overview", variant="line" and value={tab.id}. The rest is on the Tabs page.
