Tabs

Compound API (same data as TabsGroup)

tabId on the trigger and panel must match.

tsx

import { Tab } from "~/components/ui/base/tabs";

<Tab.Root selectedTabId="overview" behavior="manual">
  <Tab.List>
    <Tab.Tab key="overview">Overview</Tab.Tab>
    <Tab.Tab key="details">Details</Tab.Tab>
    <Tab.Tab key="access">Accessibility</Tab.Tab>
  </Tab.List>
  <Tab.Panel key="overview">
    <p>Overview of the basic information about this section.</p>
  </Tab.Panel>
  <Tab.Panel key="details">
    <p>Detailed description and advanced options.</p>
  </Tab.Panel>
  <Tab.Panel key="access">
    <p>Accessibility tips, keyboard shortcuts and screen readers.</p>
  </Tab.Panel>
</Tab.Root>

TabsGroup — horizontal

Data-driven shortcut TabsGroup with the same tabs as the compound API.

Overview of the basic information about this section.

tsx

import { TabsGroup } from "~/components/ui/base/tabs";

const tabs = [
  { value: "overview", label: "Overview", content: "Overview of the basic information about this section." },
  { value: "details", label: "Details", content: "Detailed description and advanced options." },
  { value: "access", label: "Accessibility", content: "Accessibility tips, keyboard shortcuts and screen readers." },
];

<TabsGroup tabs={tabs} defaultTabId="overview" />

TabsGroup — disabled item

TabsGroup — disabled item — see the example below.

Content of active tab A.

tsx

import { TabsGroup } from "~/components/ui/base/tabs";

const tabs = [
  { value: "a", label: "Active A", content: "Content of active tab A." },
  { value: "b", label: "Disabled", content: "This text won't be shown for a disabled tab anyway.", disabled: true },
  { value: "c", label: "Active C", content: "Content of active tab C." },
];

<TabsGroup tabs={tabs} defaultTabId="a" />

TabsGroup — vertical list

TabsGroup — vertical list — see the example below.

Overview of the basic information about this section.

tsx

import { TabsGroup } from "~/components/ui/base/tabs";

const tabs = [
  { value: "overview", label: "Overview", content: "Overview of the basic information about this section." },
  { value: "details", label: "Details", content: "Detailed description and advanced options." },
  { value: "access", label: "Accessibility", content: "Accessibility tips, keyboard shortcuts and screen readers." },
];

<TabsGroup tabs={tabs} vertical defaultTabId="overview" />

Line variant

Underlined tabs instead of the default bordered ones — variant="line" on Tab.Root or TabsGroup .

Overview of the basic information about this section.

tsx

import { TabsGroup } from "~/components/ui/base/tabs";

const tabs = [
  { value: "overview", label: "Overview", content: "Overview of the basic information about this section." },
  { value: "details", label: "Details", content: "Detailed description and advanced options." },
  { value: "access", label: "Accessibility", content: "Accessibility tips, keyboard shortcuts and screen readers." },
];

<TabsGroup tabs={tabs} defaultTabId="overview" variant="line" />

Compound API — vertical

Set vertical on Tab.Root and the verticalLayout prop on Tab.List / Tab.Panel.

tsx

import { Tab } from "~/components/ui/base/tabs";

<Tab.Root vertical selectedTabId="overview" behavior="manual">
  <Tab.List verticalLayout>
    <Tab.Tab key="overview">Overview</Tab.Tab>
    <Tab.Tab key="details">Details</Tab.Tab>
  </Tab.List>
  <Tab.Panel key="overview" verticalLayout>
    <p>Overview of the basic information about this section.</p>
  </Tab.Panel>
  <Tab.Panel key="details" verticalLayout>
    <p>Detailed description and advanced options.</p>
  </Tab.Panel>
</Tab.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/tabs/meta.generated.json not found or path not allowed.