Tabs

'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/san-francisco/ui/tabs';

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Settings for your account.</TabsContent>
      <TabsContent value="password">Change your password.</TabsContent>
    </Tabs>
  );
}

'use client';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/san-francisco/ui/tabs';

export default function TabsDemoVariants() {
  return (
    <div className="flex flex-col items-center gap-6">
      <Tabs defaultValue="tab1">
        <TabsList>
          <TabsTrigger value="tab1">Default</TabsTrigger>
          <TabsTrigger value="tab2">Variant</TabsTrigger>
        </TabsList>
      </Tabs>
      <Tabs defaultValue="tab1">
        <TabsList variant="line">
          <TabsTrigger value="tab1">Line</TabsTrigger>
          <TabsTrigger value="tab2">Variant</TabsTrigger>
        </TabsList>
      </Tabs>
    </div>
  );
}