Tab

The Tab component offers an effective way to organize and display content in a layered interface. It allows users to switch between different sections of information by selecting corresponding tabs, making it ideal for displaying diverse content without overwhelming the user.

Installation

Add the Tab component and its sub-components to your project using the OrbitUI CLI:

npx orbitkit@latest add tab

Usage

Import the Tab, TabList, TabTrigger, and TabContent components.

Start with the main Tab component, which can optionally set a defaultValue for the initially active tab. Inside, place a TabList to group your TabTrigger elements. Each TabTrigger needs a unique value that corresponds to the value of its associated TabContent. Finally, add your TabContent panels, ensuring each has a value that matches a TabTrigger.

Preview
Code

---
import { Tab, TabContent, TabList, TabTrigger } from "@/components/ui/tab";
---
<Tab class="w-full max-w-xs p-4 border-border border bg-surface rounded-lg">
  <TabList class="mx-auto">
    <TabTrigger value="Standard"> Standard </TabTrigger>
    <TabTrigger value="Pro"> Pro </TabTrigger>
  </TabList>
  <TabContent value="Standard">
    <div class="p-4">
      <h2 class="text-lg font-bold mb-2">Standard Plan</h2>
      <p class="mb-2">
        Ideal for personal websites and small businesses.
      </p>
      <ul class="mb-4 list-disc list-inside">
        <li>1 website</li>
        <li>10 GB SSD storage</li>
        <li>Free SSL certificate</li>
        <li>24/7 support</li>
        <li>Automatic updates</li>
      </ul>
      <div class="text-2xl font-semibold mb-2">$3.99/month</div>
      <button class="bg-blue-600 text-white px-4 py-2 rounded">Choose Standard</button>
    </div>
  </TabContent>
  <TabContent value="Pro">
    <div class="p-4">
      <h2 class="text-lg font-bold mb-2">Pro Plan</h2>
      <p class="mb-2">Perfect for businesses and growing projects.</p>
      <ul class="mb-4 list-disc list-inside">
        <li>Unlimited websites</li>
        <li>100 GB SSD storage</li>
        <li>Premium SSL certificate</li>
        <li>Priority 24/7 support</li>
        <li>Daily backups</li>
      </ul>
      <div class="text-2xl font-semibold mb-2">$9.99/month</div>
      <button class="bg-green-600 text-white px-4 py-2 rounded">
        Choose Pro
      </button>
    </div>
  </TabContent>
</Tab>

Props

The Tab system consists of several components, each with its own set of props:

Tab

The Tab component serves as the main wrapper for the entire tabbed interface. It manages the active tab state and provides context to its children.

Prop	Type	Default
`defaultValue`	`string`	`undefined`

This component accepts all the standard HTML attributes that a <div> element would.

TabList

The TabList component acts as the container for all TabTrigger elements. It semantically groups the tab controls. This component accepts all the standard HTML attributes that a <div> element would.

TabTrigger

The TabTrigger component represents an individual clickable tab that controls the visibility of its corresponding TabContent.

Prop	Type	Default
`value`	`string`	`undefined`

value: A unique identifier that links this trigger to its corresponding TabContent panel.

This component accepts all the standard HTML attributes that a <button> element would.

TabContent

The TabContent component contains the actual content associated with a specific tab. Its visibility is controlled by the active TabTrigger.

Prop	Type	Default
`value`	`string`	`undefined`

value: A unique identifier that links this content panel to its corresponding TabTrigger.

This component accepts all the standard HTML attributes that a <div> element would.