Density

Accordion

Accordion composes Base UI’s accordion primitives with Density attributes on each trigger.

Review the project scope and current status.

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

export default function AccordionExample() {
  return (
    <Accordion.Root defaultValue={["overview"]}>
      <Accordion.Item value="overview">
        <Accordion.Header>
          <Accordion.Trigger>Overview</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Review the project scope and current status.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="activity">
        <Accordion.Header>
          <Accordion.Trigger>Activity</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Scan recent updates, comments, and handoffs.
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

const styles = {
  panel: {
    padding: "0.5rem 0.75rem",
    color: "color-mix(in srgb, var(--dn-color-text) 72%, transparent)",
    fontSize: "0.875rem",
  },
} as const;

Props

Prop Attribute Values Default
Accordion.Root None Base UI root props None
Accordion.Item None Base UI item props None
Accordion.Header None Base UI header props None
Accordion.Panel None Base UI panel props None
Accordion.Trigger density-presentation data-dn-presentation button button
Accordion.Trigger density-emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
Accordion.Trigger density-size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Emphasis

Secondary trigger.

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

export default function AccordionEmphasisExample() {
  return (
    <Accordion.Root defaultValue={["secondary"]} style={styles.root}>
      <Accordion.Item value="primary">
        <Accordion.Header>
          <Accordion.Trigger density-emphasis="primary">
            Primary
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>Primary trigger.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="secondary">
        <Accordion.Header>
          <Accordion.Trigger density-emphasis="secondary">
            Secondary
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Secondary trigger.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="outline">
        <Accordion.Header>
          <Accordion.Trigger density-emphasis="outline">
            Outline
          </Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>Outline trigger.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="ghost">
        <Accordion.Header>
          <Accordion.Trigger density-emphasis="ghost">Ghost</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>Ghost trigger.</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.375rem",
  },
  panel: {
    padding: "0.375rem 0.75rem",
    color: "color-mix(in srgb, var(--dn-color-text) 72%, transparent)",
    fontSize: "0.875rem",
  },
} as const;

Size

Compact disclosure.

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

export default function AccordionSizeExample() {
  return (
    <Accordion.Root defaultValue={["sm"]} style={styles.root}>
      <Accordion.Item value="sm">
        <Accordion.Header>
          <Accordion.Trigger density-size="sm">Small</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Compact disclosure.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="md">
        <Accordion.Header>
          <Accordion.Trigger density-size="md">Medium</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Default disclosure.
        </Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="lg">
        <Accordion.Header>
          <Accordion.Trigger density-size="lg">Large</Accordion.Trigger>
        </Accordion.Header>
        <Accordion.Panel style={styles.panel}>
          Roomier disclosure.
        </Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  );
}

const styles = {
  root: {
    display: "grid",
    gap: "0.375rem",
  },
  panel: {
    padding: "0.375rem 0.75rem",
    color: "color-mix(in srgb, var(--dn-color-text) 72%, transparent)",
    fontSize: "0.875rem",
  },
} as const;