Yugen UI

Timeline

Timeline lists events over time: an order history, an activity log, the steps a request has gone through.

Timeline is an <ol>; each TimelineItem has a title, a time, an icon (or Avatar) and optional extra content. Pass dateTime to turn the time into a machine-readable <time>. The compact variant uses a small dot and one line per event, which suits long activity logs. Icons are decorative, so the title must describe the event on its own.
  1. Out for delivery
    Express Post · tracking no. EP-5520417
  2. Packed
  3. Paid
  4. Maria Garcia placed order #2041

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { Timeline, TimelineItem } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

  1. Sam changed the status to Done
    10 min ago
  2. Priya commented
    1 hour ago
    “I've updated the Q3 numbers. Could everyone take a look?”
  3. Priya uploaded q3-report.pdf
    1 hour ago
  4. Maria added 2 members
    Yesterday

Compact

Small dot, title and time on one line; extra content uses caption text.

  1. Deploy of v2.4.1 failed
    14:02
    Health check failed after 3 attempts; rolled back to v2.4.0.
  2. Response time up 30%
    13:48
  3. Deployed v2.4.0
    Yesterday
  4. Created staging environment
    Oct 20

Intent without icons

Without an icon the item shows a dot in the intent color: neutral, brand, success, warning, error.

Usage

Do
  • Put the newest event first, unless people follow a process from start to end.
  • Write titles that say who did what, because icons are not read by screen readers.
  • Pass dateTime when the shown time is relative (“2 hours ago”).
Don't
  • Don't use Timeline for steps people still have to go through. Use Stepper.
  • Don't use intent for decoration; keep color for states that really differ.

Props

Prop · TypeDefaultDescription
variant"detailed" | "compact"Default: "detailed"detailed: 32px icon, content below · compact: small dot, one line.
TimelineItem.titleReactNodeDefault: —The event: who did what.
TimelineItem.timeReactNodeDefault: —Time shown to people.
TimelineItem.dateTimestringDefault: —ISO 8601 timestamp → <time dateTime>.
TimelineItem.iconReactNodeDefault: —Icon or Avatar; empty = dot.
TimelineItem.intent"neutral" | "brand" | "success" | "warning" | "error"Default: "neutral"Color of the icon or dot. The old value "danger" is deprecated (removed in 1.0).
TimelineItem.childrenReactNodeDefault: —Extra content: a comment, files, tags.