Components
Loading preview...
A tabs component with support for persistent state, shared values across instances, and URL hash navigation. Features - Shared state across multiple instances - Persistent state with localStorage - URL hash navigation - Keyboard navigation - Automatic value detection - Custom styling support - Dark mode support
npx shadcn@latest add https://21st.dev/r/fuma-nama/tabsimport { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
function TabsDemo() {
return (
<div className="flex w-full max-w-[500px] h-[300px] flex-col p-4">
<div className="w-full">
<Tabs defaultValue="javascript" className="w-full">
<TabsList className="w-full justify-start">
<TabsTrigger value="javascript">JavaScript</TabsTrigger>
<TabsTrigger value="rust">Rust</TabsTrigger>
<TabsTrigger value="typescript">TypeScript</TabsTrigger>
</TabsList>
<TabsContent value="javascript" className="text-sm text-muted-foreground">
Hello World from JavaScript!
</TabsContent>
<TabsContent value="rust" className="text-sm text-muted-foreground">
Hello World from Rust!
</TabsContent>
<TabsContent value="typescript" className="text-sm text-muted-foreground">
Hello World from TypeScript!
</TabsContent>
</Tabs>
</div>
</div>
)
}
export { TabsDemo }