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 Tabs04() {
return (
<Tabs
defaultValue="profile"
orientation="vertical"
className="w-full max-w-md"
>
<TabsList variant="line">
<TabsTrigger value="profile">Profile</TabsTrigger>
<TabsTrigger value="billing">Billing</TabsTrigger>
<TabsTrigger value="team">Team</TabsTrigger>
<TabsTrigger value="security">Security</TabsTrigger>
</TabsList>
<TabsContent value="profile" className="text-muted-foreground px-4">
Update your personal details and avatar.
</TabsContent>
<TabsContent value="billing" className="text-muted-foreground px-4">
Manage invoices and payment methods.
</TabsContent>
<TabsContent value="team" className="text-muted-foreground px-4">
Invite members and assign roles.
</TabsContent>
<TabsContent value="security" className="text-muted-foreground px-4">
Configure two-factor authentication.
</TabsContent>
</Tabs>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Tabs04 />
</div>
)
}