Density

Timeline

Timeline renders an ordered list of activity items with a compact marker, title, optional detail, and optional metadata.

  1. Build queued
  2. Checks passed
import { Timeline } from "density-base-ui";

const timelineItems = [
  {
    id: "queued",
    title: "Build queued",
  },
  {
    id: "checked",
    title: "Checks passed",
  },
];

export default function TimelineExample() {
  return <Timeline aria-label="Deploy activity" items={timelineItems} />;
}

Props

Prop Attribute Values Default
items None TimelineItem[] Required
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl sm
Other native list props Mixed OlHTMLAttributes<HTMLOListElement> None

TimelineItem accepts id, title, optional detail, optional meta, and optional start or end slots.

Item content

  1. Ready10:28Preview generatedOpen
import { Timeline } from "density-base-ui";
export default function TimelineItemExample() {
  return (
    <Timeline
      aria-label="Build activity"
      items={[
        {
          id: "ready",
          title: "Ready",
          detail: "Preview generated",
          meta: "10:28",
          childrenStart: "✓",
          childrenEnd: "Open",
        },
      ]}
    />
  );
}

Size

  1. Ready
  1. Ready
  1. Ready
  1. Ready
  1. Ready
  1. Ready
  1. Ready
  1. Ready
import { Timeline } from "density-base-ui";

const items = [{ id: "ready", title: "Ready" }];

export default function TimelineSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <Timeline aria-label="2xs timeline" items={items} size="2xs" />
      <Timeline aria-label="xs timeline" items={items} size="xs" />
      <Timeline aria-label="sm timeline" items={items} size="sm" />
      <Timeline aria-label="md timeline" items={items} size="md" />
      <Timeline aria-label="lg timeline" items={items} size="lg" />
      <Timeline aria-label="xl timeline" items={items} size="xl" />
      <Timeline aria-label="2xl timeline" items={items} size="2xl" />
      <Timeline aria-label="3xl timeline" items={items} size="3xl" />
    </div>
  );
}