Tabs Component Catalog

Tab Variants

Underline Tabs

Default tabs with an underline indicator for the active tab.

Basic Underline Tabs

<Tabs>
  <Tab label="Account">
    <div className="p-4">
      <h3 className="text-lg font-medium">Account Settings</h3>
      <p className="mt-2 text-gray-500">Manage your account settings and preferences.</p>
    </div>
  </Tab>
  <Tab label="Notifications">
    <div className="p-4">
      <h3 className="text-lg font-medium">Notification Preferences</h3>
      <p className="mt-2 text-gray-500">Control when and how you receive notifications.</p>
    </div>
  </Tab>
  <Tab label="Security">
    <div className="p-4">
      <h3 className="text-lg font-medium">Security Settings</h3>
      <p className="mt-2 text-gray-500">Manage your password and security preferences.</p>
    </div>
  </Tab>
</Tabs>

Underline Tabs with Icons

Tabs with icons and an underline indicator for the active tab.

Underline Tabs with Icons

<Tabs variant="underline-icons">
  <Tab 
    label="Account" 
    icon={<UsersIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Account Settings</h3>
      <p className="mt-2 text-gray-500">Manage your account settings and preferences.</p>
    </div>
  </Tab>
  <Tab 
    label="Notifications" 
    icon={<BellIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Notification Preferences</h3>
      <p className="mt-2 text-gray-500">Control when and how you receive notifications.</p>
    </div>
  </Tab>
  <Tab 
    label="Security" 
    icon={<CogIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Security Settings</h3>
      <p className="mt-2 text-gray-500">Manage your password and security preferences.</p>
    </div>
  </Tab>
</Tabs>

Tabs with Icons & Button

Tabs with icons and an action button in the header.

Underline Tabs with Icons and Button

<Tabs 
  variant="underline-icons-button"
  buttonText="Add New"
  buttonOnClick={() => alert("Button clicked!")}
>
  <Tab 
    label="Account" 
    icon={<UsersIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Account Settings</h3>
      <p className="mt-2 text-gray-500">Manage your account settings and preferences.</p>
    </div>
  </Tab>
  <Tab 
    label="Notifications" 
    icon={<BellIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Notification Preferences</h3>
      <p className="mt-2 text-gray-500">Control when and how you receive notifications.</p>
    </div>
  </Tab>
  <Tab 
    label="Security" 
    icon={<CogIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Security Settings</h3>
      <p className="mt-2 text-gray-500">Manage your password and security preferences.</p>
    </div>
  </Tab>
</Tabs>

Tabs with Badges

Tabs with notification badges to indicate counts or status.

Underline Tabs with Badges

<Tabs variant="underline-badges">
  <Tab 
    label="Inbox" 
    icon={<InboxIcon className="h-4 w-4" />}
    badge="3"
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Inbox</h3>
      <p className="mt-2 text-gray-500">You have 3 unread messages.</p>
    </div>
  </Tab>
  <Tab 
    label="Sent" 
    icon={<DocumentTextIcon className="h-4 w-4" />}
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Sent</h3>
      <p className="mt-2 text-gray-500">View your sent messages.</p>
    </div>
  </Tab>
  <Tab 
    label="Drafts" 
    icon={<DocumentTextIcon className="h-4 w-4" />}
    badge="2"
  >
    <div className="p-4">
      <h3 className="text-lg font-medium">Drafts</h3>
      <p className="mt-2 text-gray-500">You have 2 draft messages.</p>
    </div>
  </Tab>
</Tabs>

Pill Tabs

Tabs with pill-shaped indicators for a more distinct visual style.

Basic Pills

<Tabs variant="pills">
  <Tab label="Overview">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Overview</h3>
      <p className="mt-2 text-gray-500">A high-level summary of the project status and goals.</p>
    </div>
  </Tab>
  <Tab label="Tasks">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Tasks</h3>
      <p className="mt-2 text-gray-500">View and manage tasks for this project.</p>
    </div>
  </Tab>
  <Tab label="Timeline">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Timeline</h3>
      <p className="mt-2 text-gray-500">Track the project schedule and milestones.</p>
    </div>
  </Tab>
</Tabs>

Brand Pill Tabs

Tabs with brand-colored pill indicators for emphasis.

Brand Pill Tabs

<Tabs variant="pills-brand">
  <Tab label="Overview">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Overview</h3>
      <p className="mt-2 text-gray-500">A high-level summary of the project status and goals.</p>
    </div>
  </Tab>
  <Tab label="Tasks">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Tasks</h3>
      <p className="mt-2 text-gray-500">View and manage tasks for this project.</p>
    </div>
  </Tab>
  <Tab label="Timeline">
    <div className="p-4">
      <h3 className="text-lg font-medium">Project Timeline</h3>
      <p className="mt-2 text-gray-500">Track the project schedule and milestones.</p>
    </div>
  </Tab>
</Tabs>

Full Width Tabs

Tabs that span the full width of the container, evenly distributing space.

Full Width Tabs

<Tabs variant="full-width">
  <Tab label="Personal Info">
    <div className="p-4">
      <h3 className="text-lg font-medium">Personal Information</h3>
      <p className="mt-2 text-gray-500">Update your personal details and preferences.</p>
    </div>
  </Tab>
  <Tab label="Address">
    <div className="p-4">
      <h3 className="text-lg font-medium">Address Information</h3>
      <p className="mt-2 text-gray-500">Manage your shipping and billing addresses.</p>
    </div>
  </Tab>
  <Tab label="Payment">
    <div className="p-4">
      <h3 className="text-lg font-medium">Payment Methods</h3>
      <p className="mt-2 text-gray-500">Add and manage your payment methods.</p>
    </div>
  </Tab>
</Tabs>

Bar Tabs

Tabs with a bar-style layout and borders between tabs.

Bar Tabs

<Tabs variant="bar">
  <Tab label="Personal Info">
    <div className="p-4">
      <h3 className="text-lg font-medium">Personal Information</h3>
      <p className="mt-2 text-gray-500">Update your personal details and preferences.</p>
    </div>
  </Tab>
  <Tab label="Address">
    <div className="p-4">
      <h3 className="text-lg font-medium">Address Information</h3>
      <p className="mt-2 text-gray-500">Manage your shipping and billing addresses.</p>
    </div>
  </Tab>
  <Tab label="Payment">
    <div className="p-4">
      <h3 className="text-lg font-medium">Payment Methods</h3>
      <p className="mt-2 text-gray-500">Add and manage your payment methods.</p>
    </div>
  </Tab>
</Tabs>

Responsive Tabs

Example of how tabs show in mobile, this is just a representation the variant="mobile" should not be directly applied

Mobile Tabs

<Tabs variant="mobile">
  <Tab label="Account">
    <div className="p-4">
      <h3 className="text-lg font-medium">Account Settings</h3>
      <p className="mt-2 text-gray-500">Manage your account settings and preferences.</p>
    </div>
  </Tab>
  <Tab label="Notifications">
    <div className="p-4">
      <h3 className="text-lg font-medium">Notification Preferences</h3>
      <p className="mt-2 text-gray-500">Control when and how you receive notifications.</p>
    </div>
  </Tab>
  <Tab label="Security">
    <div className="p-4">
      <h3 className="text-lg font-medium">Security Settings</h3>
      <p className="mt-2 text-gray-500">Manage your password and security preferences.</p>
    </div>
  </Tab>
</Tabs>