Primitive · CLI
Tabs
Tabs with morphing indicator — Family Values continuity signature.
Preview
npx shadcn@latest add @atroui/tabslayoutId pill morph — shared element travels. Panel height settles when peers differ.
Panel · overview
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/tabsSource lands in your repo. Installation · Registry
Usage
The active pill lives on TabsTrigger via layoutId — it morphs between peers. Prefer tabs for peer views, not deep hierarchy.
tsx
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs"
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="activity">Activity</TabsTrigger>
</TabsList>
<TabsContent value="overview">Overview panel</TabsContent>
<TabsContent value="activity">Activity panel</TabsContent>
</Tabs>Tabs