A tabbed interface for organizing content into distinct panels that display one at a time.

Loading...
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTab value="account">Account</TabsTab>
        <TabsTab value="password">Password</TabsTab>
      </TabsList>
      <TabsPanel value="account">Account Content</TabsPanel>
      <TabsPanel value="password">Password Content</TabsPanel>
    </Tabs>
  );
}

Installation

Usage

import { Tabs, TabsList, TabsTab, TabsPanel } from "@/components/ui/tabs";
<Tabs defaultValue="account">
  <TabsList>
    <TabsTab value="account">Account</TabsTab>
    <TabsTab value="password">Password</TabsTab>
  </TabsList>
  <TabsPanel value="account">Account Content</TabsPanel>
  <TabsPanel value="password">Password Content</TabsPanel>
</Tabs>

Examples

Vertical

Loading...
import { Tabs, TabsList, TabsPanel, TabsTab } from "@/components/ui/tabs";

export default function TabsVertical() {
  return (
    <Tabs defaultValue="account" orientation="vertical">
      <TabsList>
        <TabsTab value="account">Account</TabsTab>
        <TabsTab value="password">Password</TabsTab>
      </TabsList>
      <TabsPanel value="account" className="p-1 w-40">Account Content</TabsPanel>
      <TabsPanel value="password" className="p-1 w-40">Password Content</TabsPanel>
    </Tabs>
  );
}