Components
Loading preview...
Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/flexnative-tabs'use client'
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '@/components/ui/flexnative-tabs'
export function Tabs05() {
return (
<Tabs defaultValue="overview" className="w-full max-w-md items-center">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="activity">Activity</TabsTrigger>
<TabsTrigger value="reports" disabled>
Reports
</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="text-muted-foreground pt-2">
Snapshot of your workspace.
</TabsContent>
<TabsContent value="activity" className="text-muted-foreground pt-2">
Latest events across your team.
</TabsContent>
<TabsContent value="reports" className="text-muted-foreground pt-2">
Reports unavailable on the current plan.
</TabsContent>
</Tabs>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Tabs05 />
</div>
)
}