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} />;
}

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

Color

Set item color to destructive, warning, or success for semantic activity status.

  1. Checks failed10:12Two required checks need attention
  2. Approval pending10:18Waiting for release owner
  3. Ready to deploy10:24All blockers cleared
import { Timeline } from "density-base-ui";

export default function TimelineColorExample() {
  return (
    <Timeline
      aria-label="Deployment status"
      items={[
        {
          id: "failed",
          title: "Checks failed",
          detail: "Two required checks need attention",
          meta: "10:12",
          color: "destructive",
        },
        {
          id: "waiting",
          title: "Approval pending",
          detail: "Waiting for release owner",
          meta: "10:18",
          color: "warning",
        },
        {
          id: "ready",
          title: "Ready to deploy",
          detail: "All blockers cleared",
          meta: "10:24",
          color: "success",
        },
      ]}
    />
  );
}

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",
        },
      ]}
    />
  );
}

Hairline

Use showHairline to connect each marker to the next item.

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

export default function TimelineHairlineExample() {
  return (
    <Timeline
      aria-label="Deploy activity with connectors"
      showHairline
      items={[
        { id: "queued", title: "Build queued" },
        { id: "checked", title: "Checks passed" },
        { id: "deployed", title: "Preview deployed" },
      ]}
    />
  );
}

Size

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

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

export default function TimelineSizeExample() {
  return (
    <View>
      <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" />
    </View>
  );
}