Tabs

Tabs compose Base UI’s tabs primitives with Density attributes on each tab trigger.

Review the project summary.

import { Tabs } from "density-base-ui";

export default function TabsExample() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List>
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="activity">Activity</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Review the project summary.</Tabs.Panel>
      <Tabs.Panel value="activity">Scan the latest project updates.</Tabs.Panel>
    </Tabs.Root>
  );
}

Props

Prop	Attribute	Values	Default
`Tabs.Root`	None	Base UI root props	None
`Tabs.List`	None	Base UI list props	None
`Tabs.Panel`	None	Base UI panel props	None
`Tabs.Indicator`	None	Base UI indicator props	None
`Tabs.Tab` `density-presentation`	`data-dn-presentation`	`button`	`button`
`Tabs.Tab` `density-emphasis`	`data-dn-emphasis`	`primary`, `secondary`, `outline`, `ghost`	`secondary`
`Tabs.Tab` `density-size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`

Emphasis

import { Tabs } from "density-base-ui";

const tabEmphases = ["primary", "secondary", "outline", "ghost"] as const;

export default function TabsEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      {tabEmphases.map((emphasis) => (
        <Tabs.Root defaultValue="one" key={emphasis}>
          <Tabs.List>
            <Tabs.Tab value="one" density-emphasis={emphasis}>
              {emphasis}
            </Tabs.Tab>
            <Tabs.Tab value="two" density-emphasis={emphasis}>
              Tab
            </Tabs.Tab>
            <Tabs.Indicator />
          </Tabs.List>
        </Tabs.Root>
      ))}
    </div>
  );
}

Size

import { Tabs } from "density-base-ui";

const tabSizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function TabsSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      {tabSizes.map((size) => (
        <Tabs.Root defaultValue="one" key={size}>
          <Tabs.List>
            <Tabs.Tab value="one" density-size={size}>
              {size}
            </Tabs.Tab>
            <Tabs.Tab value="two" density-size={size}>
              Tab
            </Tabs.Tab>
            <Tabs.Indicator />
          </Tabs.List>
        </Tabs.Root>
      ))}
    </div>
  );
}