Tabs

Tabbed interface for organizing content into sections.

import { Tabs } from 'ui-lab-components/tabs';
Tab Count3
import { Tabs } from 'ui-lab-components/tabs';
 
export default function Example() {
  return (
    <Tabs default="tab1" className="w-fit">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">
        <p className="text-foreground-300">Content for Tab 1</p>
      </Tabs.Content>
      <Tabs.Content value="tab2">
        <p className="text-foreground-300">Content for Tab 2</p>
      </Tabs.Content>
      <Tabs.Content value="tab3">
        <p className="text-foreground-300">Content for Tab 3</p>
      </Tabs.Content>
    </Tabs>
  );
}

tabs/01-basic-tabs

A simple tabbed interface with content switching. Use this to organize related content into separate views.

Loading interactive preview
import { Tabs } from 'ui-lab-components/tabs';
 
export default function Example() {
  return (
    <Tabs default="overview">
      <Tabs.List aria-label="Content sections">
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="details">Details</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview">
        <p>Overview content goes here.</p>
      </Tabs.Content>
      <Tabs.Content value="details">
        <p>Details content goes here.</p>
      </Tabs.Content>
      <Tabs.Content value="settings">
        <p>Settings content goes here.</p>
      </Tabs.Content>
    </Tabs>
  );
}

tabs/02-vertical

A vertical tab layout with the tab list stacked beside its content panel.

Loading interactive preview
import { Tabs } from 'ui-lab-components/tabs';
 
const tabs = ['Profile', 'Notifications', 'Security'];
 
export default function Example() {
  return (
    <Tabs default="Profile" orientation="vertical" className="w-fit gap-6">
      <Tabs.List aria-label="Settings sections" className="pr-2">
        {tabs.map((tab) => (
          <Tabs.Trigger key={tab} value={tab}>{tab}</Tabs.Trigger>
        ))}
      </Tabs.List>
      {tabs.map((tab) => (
        <Tabs.Content key={tab} value={tab} className="w-64 pt-0">
          <p>{tab} content goes here.</p>
        </Tabs.Content>
      ))}
    </Tabs>
  );
}

tabs/03-underline

Horizontal tabs with underline indicator. Great for documentation sites.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Tabs } from 'ui-lab-components/tabs';
 
export default function Example() {
  const [selected, setSelected] = useState("tab1");
 
  return (
    <Tabs value={selected} onValueChange={setSelected} variant="underline" className="w-fit">
      <Tabs.List aria-label="Tab options">
        <Tabs.Trigger value="tab1">Install</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Usage</Tabs.Trigger>
        <Tabs.Trigger value="tab3">API</Tabs.Trigger>
      </Tabs.List>
    </Tabs>
  );
}

tabs/04-vertical-underline

Vertical tabs with underline variant indicator.

Loading interactive preview
"use client";
 
import { useState } from 'react';
import { Tabs } from 'ui-lab-components/tabs';
 
export default function Example() {
  const [selected, setSelected] = useState("tab1");
 
  return (
    <Tabs value={selected} onValueChange={setSelected} variant="underline" orientation="vertical" className="flex w-fit gap-4">
      <Tabs.List aria-label="Tab options" className="flex flex-col w-fit">
        <Tabs.Trigger value="tab1">Profile</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Billing</Tabs.Trigger>
        <Tabs.Trigger value="tab3">Team</Tabs.Trigger>
      </Tabs.List>
    </Tabs>
  );
}