Density

SectionTabs

SectionTabs renders Base UI’s tabs primitives from one items prop, with Density attributes on each tab trigger.

Project summary
import { useState } from "react";
import { SectionTabs } from "density-base-ui";

export default function SectionTabsExample() {
  const [value, setValue] = useState("overview");

  return (
    <SectionTabs
      value={value}
      onValueChange={setValue}
      items={[
        { id: "overview", label: "Overview", content: "Project summary" },
        { id: "activity", label: "Activity", content: "Latest updates" },
      ]}
    />
  );
}

Props

Prop Attribute Values Default
items None { id, label, content, disabled? }[] Required
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Emphasis

import { SectionTabs } from "density-base-ui";
const items = [
  { id: "one", label: "One", content: null },
  { id: "two", label: "Two", content: null },
];
export default function SectionTabsEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <SectionTabs value="one" emphasis="primary" items={items} />
      <SectionTabs value="one" emphasis="secondary" items={items} />
      <SectionTabs value="one" emphasis="outline" items={items} />
      <SectionTabs value="one" emphasis="ghost" items={items} />
    </div>
  );
}

Size

import { SectionTabs } from "density-base-ui";
const items = [
  { id: "one", label: "One", content: null },
  { id: "two", label: "Two", content: null },
];
export default function SectionTabsSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <SectionTabs value="one" size="2xs" items={items} />
      <SectionTabs value="one" size="xs" items={items} />
      <SectionTabs value="one" size="sm" items={items} />
      <SectionTabs value="one" size="md" items={items} />
      <SectionTabs value="one" size="lg" items={items} />
      <SectionTabs value="one" size="xl" items={items} />
      <SectionTabs value="one" size="2xl" items={items} />
      <SectionTabs value="one" size="3xl" items={items} />
    </div>
  );
}