Density

Accordion

Accordion renders Base UI’s accordion primitives from one items prop. It fills its available width, keeps triggers flush with their bordered panels, and adds a panel-style border to each trigger.

Review the project scope and current status.

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

export default function AccordionExample() {
  return (
    <Accordion
      style={{ width: "100%", maxWidth: "500px" }}
      defaultValue={["overview"]}
      items={[
        {
          id: "overview",
          label: "Overview",
          content: (
            <div
              data-dn-emphasis="secondary"
              data-dn-presentation="label"
              data-dn-size="md"
              style={styles.panel}
            >
              Review the project scope and current status.
            </div>
          ),
        },
        {
          id: "activity",
          label: "Activity",
          content: (
            <div
              data-dn-emphasis="secondary"
              data-dn-presentation="label"
              data-dn-size="md"
              style={styles.panel}
            >
              Scan recent updates, comments, and handoffs.
            </div>
          ),
        },
      ]}
    />
  );
}

const styles = {
  panel: {
    padding: "0.5rem 0.75rem",
  },
} as const;

Props

Prop Attribute Values Default
items None { id, label, content, childrenStart?, childrenEnd?, panelPadding?, disabled? }[] Required
headerDepth data-dn-depth 1 through 7 1
panelDepth data-dn-depth 1 through 7 2
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Each item may use panelPadding with none or any Density size; it defaults to sm.

Depth

Accordion panel at depth 1.

Accordion panel at depth 2.

Accordion panel at depth 3.

Accordion panel at depth 4.
import { Accordion } from "density-base-ui";

export default function AccordionDepthExample() {
  return (
    <div style={styles.root}>
      {(["1", "2", "3", "4"] as const).map((depth) => (
        <Accordion
          style={{ width: "100%", maxWidth: "500px" }}
          key={depth}
          defaultValue={[depth]}
          headerDepth={depth}
          panelDepth={depth}
          items={[
            {
              id: depth,
              label: `Depth ${depth}`,
              content: (
                <div data-dn-presentation="label" data-dn-size="md" style={styles.panel}>
                  {`Accordion panel at depth ${depth}.`}
                </div>
              ),
            },
          ]}
        />
      ))}
    </div>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.375rem",
  },
  panel: {
    padding: "0.375rem 0.75rem",
  },
} as const;

Size

Compact disclosure.

Default disclosure.

Roomier disclosure.
import { Accordion } from "density-base-ui";

export default function AccordionSizeExample() {
  return (
    <div style={styles.root}>
      {(
        [
          { size: "sm", label: "Small", content: "Compact disclosure." },
          { size: "md", label: "Medium", content: "Default disclosure." },
          { size: "lg", label: "Large", content: "Roomier disclosure." },
        ] as const
      ).map((item) => (
        <Accordion
          style={{ width: "100%", maxWidth: "500px" }}
          key={item.size}
          defaultValue={[item.size]}
          size={item.size}
          items={[
            {
              id: item.size,
              label: item.label,
              content: (
                <div
                  data-dn-emphasis="secondary"
                  data-dn-presentation="label"
                  data-dn-size="md"
                  style={styles.panel}
                >
                  {item.content}
                </div>
              ),
            },
          ]}
        />
      ))}
    </div>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.375rem",
  },
  panel: {
    padding: "0.375rem 0.75rem",
  },
} as const;