Tabs
Underlined tabs whose panels wipe in.
Installation
npx shadcn@latest add @vinyl/tabsUsage
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
<Tabs defaultValue="a">
<TabsList>
<TabsTrigger value="a">Side A</TabsTrigger>
<TabsTrigger value="b">Side B</TabsTrigger>
</TabsList>
<TabsContent value="a">…</TabsContent>
<TabsContent value="b">…</TabsContent>
</Tabs>API
Panels animate each time they become active: a 350ms bar-left wipe on the web (override with [--wipe-duration:…]), a short FadeInLeft on native. Both respect reduced motion.