Tabs

Navigation 6

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs to your project and fits it to your theme.

Code

How Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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 }