Components
Loading preview...
Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/flexnative-tabs-more'use client'
import { Button } from '@/components/ui/button'
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from '@/components/ui/flexnative-tabs-more'
export function Tabs11() {
return (
<Tabs defaultValue="account" className="w-full max-w-md gap-4">
<TabsList className="w-full">
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">
<Card>
<CardHeader>
<CardTitle>Account</CardTitle>
<CardDescription>
Update your profile details. Click save when done.
</CardDescription>
</CardHeader>
<CardContent>
<FieldGroup>
<Field>
<FieldLabel htmlFor="tabs11-name">Name</FieldLabel>
<Input id="tabs11-name" defaultValue="shadcn" />
</Field>
<Field>
<FieldLabel htmlFor="tabs11-username">Username</FieldLabel>
<Input id="tabs11-username" defaultValue="@shadcn" />
</Field>
</FieldGroup>
</CardContent>
<CardFooter>
<Button>Save changes</Button>
</CardFooter>
</Card>
</TabsContent>
<TabsContent value="password">
<Card>
<CardHeader>
<CardTitle>Password</CardTitle>
<CardDescription>
You will be signed out after changing your password.
</CardDescription>
</CardHeader>
<CardContent>
<FieldGroup>
<Field>
<FieldLabel htmlFor="tabs11-current">
Current password
</FieldLabel>
<Input id="tabs11-current" type="password" />
</Field>
<Field>
<FieldLabel htmlFor="tabs11-new">New password</FieldLabel>
<Input id="tabs11-new" type="password" />
</Field>
</FieldGroup>
</CardContent>
<CardFooter>
<Button>Update password</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Tabs11 />
</div>
)
}