Zentauri UI
Data display

Timelines for activity and history

Timelines render ordered events down a connected vertical track. Each TimelineItem carries an indicator plus a content slot for a title and supporting description, while the connector line is drawn automatically between items.

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Activity feed

  1. Pushed 3 commits

    main · 2 minutes ago

  2. Opened pull request

    Add timeline component · 1 hour ago

  3. Closed issue #128

    Yesterday

  1. Kickoff

    Project scope agreed with stakeholders.

  2. Design review

    Final mocks signed off.

  3. Launch

    Shipped to production.

Timeline variants examples

Use Show output / Show code on each row. Snippets start with a Variant line naming the axis and token.

Appearance: DEFAULT

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: SKY

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: ROSE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: PURPLE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: PINK

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: ORANGE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: YELLOW

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: TEAL

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: INDIGO

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: EMERALD

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRAY

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: VIOLET

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-BLUE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-GREEN

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-RED

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-YELLOW

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-PURPLE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-TEAL

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-INDIGO

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-PINK

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Appearance: GRADIENT-ORANGE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Size: SM

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Size: MD

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Size: LG

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Animated: NONE

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Animated: DEFAULT

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Animated: SMOOTH

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

Animated: SLOW

  1. Order placed

    We received your order.

  2. Processing

    Your items are being prepared.

  3. Shipped

    The package is on the way to you.

  4. Delivered

    Handed off at the front door.

CSS variable overrides

Timeline CSS variables

Override these timeline variables on :root, a theme selector, or a component wrapper.

102 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-timeline-indicator-default-border: oklch(55.1% 0.027 264.364 / 0.6);
  --zui-timeline-indicator-default-bg: oklch(55.1% 0.027 264.364 / 0.2);
  --zui-timeline-indicator-default-fg: oklch(21% 0.034 264.665);
  --zui-timeline-indicator-default-ring: oklch(70.7% 0.022 261.325 / 0.3);
  --zui-timeline-indicator-sky-border: oklch(68.5% 0.169 237.323 / 0.6);
  --zui-timeline-indicator-sky-bg: oklch(68.5% 0.169 237.323 / 0.2);
  --zui-timeline-indicator-sky-fg: oklch(39.1% 0.09 240.876);
  --zui-timeline-indicator-sky-ring: oklch(74.6% 0.16 232.661 / 0.3);
  --zui-timeline-indicator-rose-border: oklch(64.5% 0.246 16.439 / 0.6);
  --zui-timeline-indicator-rose-bg: oklch(64.5% 0.246 16.439 / 0.2);
  --zui-timeline-indicator-rose-fg: oklch(41% 0.159 10.272);
  --zui-timeline-indicator-rose-ring: oklch(71.2% 0.194 13.428 / 0.3);
  --zui-timeline-indicator-purple-border: oklch(62.7% 0.265 303.9 / 0.6);
  --zui-timeline-indicator-purple-bg: oklch(62.7% 0.265 303.9 / 0.2);
  --zui-timeline-indicator-purple-fg: oklch(38.1% 0.176 304.987);
  --zui-timeline-indicator-purple-ring: oklch(71.4% 0.203 305.504 / 0.3);
  --zui-timeline-indicator-pink-border: oklch(65.6% 0.241 354.308 / 0.6);
  --zui-timeline-indicator-pink-bg: oklch(65.6% 0.241 354.308 / 0.2);
  --zui-timeline-indicator-pink-fg: oklch(40.8% 0.153 2.432);
  --zui-timeline-indicator-pink-ring: oklch(71.8% 0.202 349.761 / 0.3);
  --zui-timeline-indicator-orange-border: oklch(70.5% 0.213 47.604 / 0.6);
  --zui-timeline-indicator-orange-bg: oklch(70.5% 0.213 47.604 / 0.2);
  --zui-timeline-indicator-orange-fg: oklch(40.8% 0.123 38.172);
  --zui-timeline-indicator-orange-ring: oklch(75% 0.183 55.934 / 0.3);
  --zui-timeline-indicator-yellow-border: oklch(79.5% 0.184 86.047 / 0.6);
  --zui-timeline-indicator-yellow-bg: oklch(79.5% 0.184 86.047 / 0.2);
  --zui-timeline-indicator-yellow-fg: oklch(42.1% 0.095 57.708);
  --zui-timeline-indicator-yellow-ring: oklch(85.2% 0.199 91.936 / 0.3);
  --zui-timeline-indicator-teal-border: oklch(70.4% 0.14 182.503 / 0.6);
  --zui-timeline-indicator-teal-bg: oklch(70.4% 0.14 182.503 / 0.2);
  --zui-timeline-indicator-teal-fg: oklch(38.6% 0.063 188.416);
  --zui-timeline-indicator-teal-ring: oklch(77.7% 0.152 181.912 / 0.3);
  --zui-timeline-indicator-indigo-border: oklch(58.5% 0.233 277.117 / 0.6);
  --zui-timeline-indicator-indigo-bg: oklch(58.5% 0.233 277.117 / 0.2);
  --zui-timeline-indicator-indigo-fg: oklch(35.9% 0.144 278.697);
  --zui-timeline-indicator-indigo-ring: oklch(67.3% 0.182 276.935 / 0.3);
  --zui-timeline-indicator-emerald-border: oklch(69.6% 0.17 162.48 / 0.6);
  --zui-timeline-indicator-emerald-bg: oklch(69.6% 0.17 162.48 / 0.2);
  --zui-timeline-indicator-emerald-fg: oklch(37.8% 0.077 168.94);
  --zui-timeline-indicator-emerald-ring: oklch(76.5% 0.177 163.223 / 0.3);
  --zui-timeline-indicator-gray-border: oklch(55.1% 0.027 264.364 / 0.6);
  --zui-timeline-indicator-gray-bg: oklch(55.1% 0.027 264.364 / 0.2);
  --zui-timeline-indicator-gray-fg: oklch(21% 0.034 264.665);
  --zui-timeline-indicator-gray-ring: oklch(70.7% 0.022 261.325 / 0.3);
  --zui-timeline-indicator-violet-border: oklch(60.6% 0.25 292.717 / 0.6);
  --zui-timeline-indicator-violet-bg: oklch(60.6% 0.25 292.717 / 0.2);
  --zui-timeline-indicator-violet-fg: oklch(38% 0.189 293.745);
  --zui-timeline-indicator-violet-ring: oklch(70.2% 0.183 293.541 / 0.3);
  --zui-timeline-indicator-gradient-blue-from: oklch(62.3% 0.214 259.815);
  --zui-timeline-indicator-gradient-blue-to: oklch(54.6% 0.245 262.881);
  --zui-timeline-indicator-gradient-blue-fg: #ffffff;
  --zui-timeline-indicator-gradient-blue-ring: oklch(70.7% 0.165 254.624 / 0.3);
  --zui-timeline-indicator-gradient-green-from: oklch(72.3% 0.219 149.579);
  --zui-timeline-indicator-gradient-green-to: oklch(62.7% 0.194 149.214);
  --zui-timeline-indicator-gradient-green-fg: #ffffff;
  --zui-timeline-indicator-gradient-green-ring: oklch(79.2% 0.209 151.711 / 0.3);
  --zui-timeline-indicator-gradient-red-from: oklch(63.7% 0.237 25.331);
  --zui-timeline-indicator-gradient-red-to: oklch(57.7% 0.245 27.325);
  --zui-timeline-indicator-gradient-red-fg: #ffffff;
  --zui-timeline-indicator-gradient-red-ring: oklch(70.4% 0.191 22.216 / 0.3);
  --zui-timeline-indicator-gradient-yellow-from: oklch(85.2% 0.199 91.936);
  --zui-timeline-indicator-gradient-yellow-to: oklch(79.5% 0.184 86.047);
  --zui-timeline-indicator-gradient-yellow-fg: oklch(42.1% 0.095 57.708);
  --zui-timeline-indicator-gradient-yellow-ring: oklch(85.2% 0.199 91.936 / 0.3);
  --zui-timeline-indicator-gradient-purple-from: oklch(71.4% 0.203 305.504);
  --zui-timeline-indicator-gradient-purple-to: oklch(62.7% 0.265 303.9);
  --zui-timeline-indicator-gradient-purple-fg: #ffffff;
  --zui-timeline-indicator-gradient-purple-ring: oklch(71.4% 0.203 305.504 / 0.3);
  --zui-timeline-indicator-gradient-teal-from: oklch(77.7% 0.152 181.912);
  --zui-timeline-indicator-gradient-teal-to: oklch(70.4% 0.14 182.503);
  --zui-timeline-indicator-gradient-teal-fg: #ffffff;
  --zui-timeline-indicator-gradient-teal-ring: oklch(77.7% 0.152 181.912 / 0.3);
  --zui-timeline-indicator-gradient-indigo-from: oklch(67.3% 0.182 276.935);
  --zui-timeline-indicator-gradient-indigo-to: oklch(58.5% 0.233 277.117);
  --zui-timeline-indicator-gradient-indigo-fg: #ffffff;
  --zui-timeline-indicator-gradient-indigo-ring: oklch(67.3% 0.182 276.935 / 0.3);
  --zui-timeline-indicator-gradient-pink-from: oklch(71.8% 0.202 349.761);
  --zui-timeline-indicator-gradient-pink-to: oklch(65.6% 0.241 354.308);
  --zui-timeline-indicator-gradient-pink-fg: #ffffff;
  --zui-timeline-indicator-gradient-pink-ring: oklch(71.8% 0.202 349.761 / 0.3);
  --zui-timeline-indicator-gradient-orange-from: oklch(75% 0.183 55.934);
  --zui-timeline-indicator-gradient-orange-to: oklch(70.5% 0.213 47.604);
  --zui-timeline-indicator-gradient-orange-fg: #ffffff;
  --zui-timeline-indicator-gradient-orange-ring: oklch(75% 0.183 55.934 / 0.3);
  --zui-timeline-connector: #0000001f;
  --zui-timeline-title-fg: oklch(20.8% 0.042 265.755);
  --zui-timeline-description-fg: oklch(44.6% 0.03 256.802);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-timeline-indicator-default-fg-dark: oklch(96.7% 0.003 264.542);
  --zui-timeline-connector-dark: #ffffff1f;
  /* ...same variables with -dark at the end */
}

Overview

Indicators inherit a themeable appearance and size from the Timeline root, and any item can override its own appearance. Every color is a --zui-timeline-* CSS variable with a paired dark-mode value.

Common use cases

  • Order and shipment tracking.
  • Activity and audit feeds.
  • Product changelogs and release notes.
  • Project milestones and roadmaps.

FAQ

How is the connector line drawn?

Each item except the last renders an absolutely-positioned connector that runs from its indicator down to the next item. The last item drops its bottom padding so the track ends cleanly.

Can the timeline animate on scroll?

Import TimelineItem from the /animated entry to get a staggered fade-and-rise entrance that respects prefers-reduced-motion. The static entry ships without framer-motion.