Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Make changes to your accounts.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" css={{ w: "full" }}>
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="account" css={{ p: "2" }}>
        <p>Make changes to your accounts.</p>
      </TabsContent>
      <TabsContent value="documents" css={{ p: "2" }}>
        <p>Access and update your documents.</p>
      </TabsContent>
      <TabsContent value="settings" css={{ p: "2" }}>
        <p>Edit your profile or update contact informations.</p>
      </TabsContent>
    </Tabs>
  );
}

Installation

npx nore-ui-cli@latest add tabs

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="account" className="w-[400px]">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>

Examples

Vertical

You can create vertical tabs by using the orientation prop.

Make changes to your accounts.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function TabsVertical() {
  return (
    <Tabs defaultValue="account" orientation="vertical" css={{ w: "full" }}>
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="documents">Documents</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="account" css={{ p: "2" }}>
        <p>Make changes to your accounts.</p>
      </TabsContent>
      <TabsContent value="documents" css={{ p: "2" }}>
        <p>Access and update your documents.</p>
      </TabsContent>
      <TabsContent value="settings" css={{ p: "2" }}>
        <p>Edit your profile or update contact informations.</p>
      </TabsContent>
    </Tabs>
  );
}