Overlays

Tabs

Switch between views in the same place. Follows the ARIA tabs pattern: one tab stop, arrows (and Home/End) move and activate, panels are linked to their tabs.

The preview.

demos/tabs.tsx

import { Tab, TabList, TabPanel, Tabs } from "pixelbits/tabs";

export default function Demo() {
  return (
    <div className="grid w-full max-w-md gap-8">
      <Tabs defaultValue="preview">
        <TabList aria-label="Example">
          <Tab value="preview">Preview</Tab>
          <Tab value="code">Code</Tab>
          <Tab value="props">Props</Tab>
        </TabList>
        <TabPanel value="preview" className="text-sm text-pb-muted">
          The preview.
        </TabPanel>
        <TabPanel value="code" className="font-pb-mono text-xs">
          {"<Button />"}
        </TabPanel>
        <TabPanel value="props" className="text-sm">
          The props table.
        </TabPanel>
      </Tabs>
      <Tabs defaultValue="dark" variant="segmented">
        <TabList aria-label="Theme">
          <Tab value="dark">Dark</Tab>
          <Tab value="light">Light</Tab>
          <Tab value="system">System</Tab>
        </TabList>
      </Tabs>
    </div>
  );
}

Installation

npm: import

import { Tabs, TabList, Tab, TabPanel } from "pixelbits/tabs";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/tabs.json

API

<Tabs>

Switch between views in the same place. Follows the ARIA tabs pattern: one tab stop, arrows (and Home/End) move and activate, panels are linked to their tabs.

Example

<Tabs defaultValue="preview">
  <TabList aria-label="Example">
    <Tab value="preview">Preview</Tab>
    <Tab value="code">Code</Tab>
  </TabList>
  <TabPanel value="preview">…</TabPanel>
  <TabPanel value="code">…</TabPanel>
</Tabs>

Prop	Type	Default	Description
value	string	—	The active tab's value (controlled).
defaultValue	string	—	The tab active at first (uncontrolled).
onValueChange	(value: string) => void	—	Called with the value of the tab the user activated.
variant	"underline" \| "segmented"	"underline"	Look of the tab list. `"underline"`: text tabs over a hairline; the active one gets a pixel dashed accent line. `"segmented"`: a compact switch of options in a frame.
keepMounted	boolean	false	Keep inactive panels in the DOM (hidden) to preserve their state. By default only the active panel is rendered.
withPanels	boolean	true	Set `false` when the tabs switch content without `TabPanel`s (for example a billing period switch): tabs then point at no panel.
children*	ReactNode	—	`TabList` and `TabPanel`s.

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.

<TabList>

The row of tabs. Handles arrow-key navigation between them.

Prop	Type	Default	Description
children*	ReactNode	—	The `Tab`s. Name the list with `aria-label` when there is no heading.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

<Tab>

One tab. Activating it shows the TabPanel with the same value.

Prop	Type	Default	Description
value*	string	—	Identifies the tab and its `TabPanel`.

Also accepts every prop of ButtonHTMLAttributes<HTMLButtonElement>.

<TabPanel>

The content shown while its Tab is active.

Prop	Type	Default	Description
value*	string	—	The `Tab` value this panel belongs to.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.