Density

Tree

Tree renders nested disclosure rows from one items prop. Use it when rows need compact Density button styling without a full application treeview model.

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

export default function TreeExample() {
  return (
    <Tree
      items={[
        { id: "readme", label: "README.md" },
        { id: "package", label: "package.json" },
      ]}
    />
  );
}

Props

Prop Attribute Values Default
items None Nested { id, label, active?, children? }[] Required
rowStyle None CSS properties None
panelStyle None CSS properties None
active on item data-selected true, false false
emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm

Row style

import { Tree } from "density-base-ui";
const items = [
  { id: "src", label: "src" },
  { id: "docs", label: "docs" },
];
export default function TreeRowStyleExample() {
  return <Tree items={items} rowStyle={{ paddingBlock: "0.25rem" }} />;
}

Panel style

import { Tree } from "density-base-ui";
const items = [
  { id: "src", label: "src", children: [{ id: "index", label: "index.ts" }] },
];
export default function TreePanelStyleExample() {
  return <Tree items={items} value={["src"]} panelStyle={{ gap: "0.25rem" }} />;
}

Emphasis

import { Tree } from "density-base-ui";
export default function TreeEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem" }}>
      <Tree emphasis="primary" items={[{ id: "primary", label: "Primary" }]} />
      <Tree
        emphasis="secondary"
        items={[{ id: "secondary", label: "Secondary" }]}
      />
      <Tree emphasis="outline" items={[{ id: "outline", label: "Outline" }]} />
      <Tree emphasis="ghost" items={[{ id: "ghost", label: "Ghost" }]} />
    </div>
  );
}

Size

import { Tree } from "density-base-ui";
export default function TreeSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem" }}>
      <Tree size="2xs" items={[{ id: "2xs", label: "2xs" }]} />
      <Tree size="xs" items={[{ id: "xs", label: "xs" }]} />
      <Tree size="sm" items={[{ id: "sm", label: "sm" }]} />
      <Tree size="md" items={[{ id: "md", label: "md" }]} />
      <Tree size="lg" items={[{ id: "lg", label: "lg" }]} />
      <Tree size="xl" items={[{ id: "xl", label: "xl" }]} />
      <Tree size="2xl" items={[{ id: "2xl", label: "2xl" }]} />
      <Tree size="3xl" items={[{ id: "3xl", label: "3xl" }]} />
    </div>
  );
}