Animated tabs with a sliding active indicator in underline, pills, segmented and default styles. Keyboard accessible, built on Base UI, themed with shadcn tokens.
"use client";
import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
const settings = {
variant: "underline",
size: "md",
};
const PANELS = [
{
value: "overview",
label: "Overview",
stats: [
{ label: "Revenue", value: "$48.2k", delta: "+18%" },
{ label: "Customers", value: "1,284", delta: "+6%" },
{ label: "Churn", value: "1.9%", delta: "-0.4%" },
],
},
{
value: "analytics",
label: "Analytics",
stats: [
{ label: "Visitors", value: "12.4k", delta: "+9%" },
{ label: "Sessions", value: "31.8k", delta: "+12%" },
{ label: "Bounce", value: "38%", delta: "-3%" },
],
},
{
value: "reports",
label: "Reports",
stats: [
{ label: "Ready", value: "3", delta: "new" },
{ label: "Scheduled", value: "7", delta: "weekly" },
{ label: "Shared", value: "12", delta: "team" },
],
},
{
value: "settings",
label: "Settings",
stats: [
{ label: "Members", value: "8", delta: "2 pending" },
{ label: "Region", value: "EU", delta: "Frankfurt" },
{ label: "Plan", value: "Pro", delta: "annual" },
],
},
];
export default function TabsDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const size = s.size as "sm" | "md" | "lg";
return (
<div className="flex min-h-[440px] w-full items-center justify-center bg-background p-6">
<div className="w-full max-w-xl space-y-5">
<div className="rounded-xl border border-border bg-card p-6 text-card-foreground shadow-sm">
<Tabs
defaultValue="overview"
variant={s.variant as "default" | "underline" | "pills" | "segmented"}
size={size}
>
<TabsList>
{PANELS.map(({ value, label }) => (
<TabsTrigger key={value} value={value}>
{label}
</TabsTrigger>
))}
</TabsList>
{PANELS.map((panel) => (
<TabsContent key={panel.value} value={panel.value} className="pt-5">
<div className="grid grid-cols-3 gap-3">
{panel.stats.map((stat) => (
<div key={stat.label} className="rounded-lg border border-border bg-background p-3">
<p className="text-xs text-muted-foreground">{stat.label}</p>
<p className="mt-1 text-lg font-semibold tracking-tight">{stat.value}</p>
<p className="text-xs text-muted-foreground">{stat.delta}</p>
</div>
))}
</div>
</TabsContent>
))}
</Tabs>
</div>
<div className="flex justify-center">
<Tabs defaultValue="month" variant="segmented" size={size}>
<TabsList>
<TabsTrigger value="day">Day</TabsTrigger>
<TabsTrigger value="week">Week</TabsTrigger>
<TabsTrigger value="month">Month</TabsTrigger>
<TabsTrigger value="year">Year</TabsTrigger>
</TabsList>
</Tabs>
</div>
</div>
</div>
);
}