Accessible tabs built on Radix UI with a spring-animated active underline and a blur-and-height motion transition between panels.
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/r-tabs";
export default function TabsDemo() {
return (
<div className="mx-auto w-full max-w-xl px-4 py-12">
<Tabs defaultValue="overview">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="analytics">Analytics</TabsTrigger>
<TabsTrigger value="reports">Reports</TabsTrigger>
</TabsList>
<TabsContent value="overview">
<h3 className="text-lg font-medium tracking-tight text-foreground">
Overview
</h3>
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
A quick snapshot of your workspace. The active underline glides
between tabs while the panel below smoothly resizes and un-blurs
into place.
</p>
</TabsContent>
<TabsContent value="analytics">
<h3 className="text-lg font-medium tracking-tight text-foreground">
Analytics
</h3>
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
Track engagement, retention, and conversion across every channel
with charts that update in real time.
</p>
</TabsContent>
<TabsContent value="reports">
<h3 className="text-lg font-medium tracking-tight text-foreground">
Reports
</h3>
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
Generate and export detailed summaries, then schedule them to land
in your inbox automatically.
</p>
</TabsContent>
</Tabs>
</div>
);
}