Density

Tree

Tree composes the accordion wrapper for simple nested disclosure lists. 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.Root defaultValue={["src", "components"]} style={styles.root}>
      <Tree.Item value="src">
        <Tree.Trigger level={0}>src</Tree.Trigger>
        <Tree.Content>
          <Tree.Item value="components">
            <Tree.Trigger level={1}>components</Tree.Trigger>
            <Tree.Content>
              <Tree.Leaf level={2}>Button.tsx</Tree.Leaf>
              <Tree.Leaf level={2} active>
                Tree.tsx
              </Tree.Leaf>
            </Tree.Content>
          </Tree.Item>
          <Tree.Leaf level={1}>index.ts</Tree.Leaf>
        </Tree.Content>
      </Tree.Item>
      <Tree.Leaf level={0}>package.json</Tree.Leaf>
    </Tree.Root>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.125rem",
    minWidth: "14rem",
  },
} as const;

Props

Prop Attribute Values Default
Tree.Root None Accordion root props None
Tree.Item None Accordion item props None
Tree.Content None Accordion panel props None
Tree.Trigger active data-selected true, false false
Tree.Trigger level data-dn-tree-level Number None
Tree.Trigger density-presentation data-dn-presentation button button
Tree.Trigger density-emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
Tree.Trigger density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
Tree.Leaf active data-selected true, false false
Tree.Leaf level data-dn-tree-level Number None
Tree.Leaf density-presentation data-dn-presentation button button
Tree.Leaf density-emphasis data-dn-emphasis primary, secondary, outline, ghost ghost
Tree.Leaf density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm

Emphasis

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

export default function TreeEmphasisExample() {
  return (
    <Tree.Root defaultValue={["workspace"]} style={styles.root}>
      <Tree.Item value="workspace">
        <Tree.Trigger
          type="button"
          level={0}
          density-emphasis="secondary"
          style={styles.row}
        >
          Workspace
        </Tree.Trigger>
        <Tree.Content style={styles.content}>
          <Tree.Leaf
            type="button"
            level={1}
            density-emphasis="primary"
            style={styles.row}
          >
            Primary row
          </Tree.Leaf>
          <Tree.Leaf
            type="button"
            level={1}
            density-emphasis="secondary"
            style={styles.row}
          >
            Secondary row
          </Tree.Leaf>
          <Tree.Leaf
            type="button"
            level={1}
            density-emphasis="outline"
            style={styles.row}
          >
            Outline row
          </Tree.Leaf>
          <Tree.Leaf
            type="button"
            level={1}
            density-emphasis="ghost"
            style={styles.row}
          >
            Ghost row
          </Tree.Leaf>
        </Tree.Content>
      </Tree.Item>
    </Tree.Root>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.125rem",
    minWidth: "14rem",
  },
  content: {
    display: "grid",
    gap: "0.125rem",
  },
  row: {
    width: "100%",
    justifyContent: "flex-start",
  },
} as const;

Size

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

export default function TreeSizeExample() {
  return (
    <Tree.Root defaultValue={["sizes"]} style={styles.root}>
      <Tree.Item value="sizes">
        <Tree.Trigger level={0}>Sizes</Tree.Trigger>
        <Tree.Content>
          <Tree.Leaf level={1} density-size="xs">
            Extra small
          </Tree.Leaf>
          <Tree.Leaf level={1} density-size="sm">
            Small
          </Tree.Leaf>
          <Tree.Leaf level={1} density-size="md">
            Medium
          </Tree.Leaf>
          <Tree.Leaf level={1} density-size="lg">
            Large
          </Tree.Leaf>
        </Tree.Content>
      </Tree.Item>
    </Tree.Root>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.125rem",
    minWidth: "14rem",
  },
} as const;