Tabs

A set of layered sections of content, known as tab panels, that display one panel at a time.

radix-ui.com

Basic

Default

Account

<Tabs defaultValue="account" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="account">
      Account
    </TabsTrigger>
    <TabsTrigger value="password">
      Password
    </TabsTrigger>
    <TabsTrigger value="settings">
      Settings
    </TabsTrigger>
  </TabsList>
  <TabsContent value="account" className="p-4">
    <h3>
      Account
    </h3>
  </TabsContent>
  <TabsContent value="password" className="p-4">
    <h3>
      Password
    </h3>
  </TabsContent>
  <TabsContent value="settings" className="p-4">
    <h3>
      Settings
    </h3>
  </TabsContent>
</Tabs>

Disabled Tab

<Tabs defaultValue="active" className="w-full max-w-md">
  <TabsList>
    <TabsTrigger value="one">
      One
    </TabsTrigger>
    <TabsTrigger value="two">
      Two
    </TabsTrigger>
    <TabsTrigger value="three" disabled={true}>
      Three
    </TabsTrigger>
  </TabsList>
  <TabsContent value="one" className="p-4">
    <p>
      content one
    </p>
  </TabsContent>
  <TabsContent value="two" className="p-4">
    <p>
      content two
    </p>
  </TabsContent>
  <TabsContent value="three" className="p-4">
    <p>
      content three
    </p>
  </TabsContent>
</Tabs>