Camaleo
EN · PTGitHub
// preview in
saved for every page

Timeline

Lists events in the order they happened, like the steps of a delivery or the history of a ticket. Each event has a title, details and a time.

Pattern HTML ordered listServer componentSource ↗
minimal · light · #3fa34d

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

tone

Installation

Set up Camaleo once (Installation), then import what you need. It renders on the server.

import { Timeline, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime } from "@camaleo/react";

Anatomy

An ordered list. Each item is a row with the indicator, the text and the time; the line between indicators is drawn by CSS. Every part has a data-slot you can target from CSS.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

  3. Delivered

    Signed for by the front desk.

  1. Deploy started

    Release 2.8.0 by Ana Ribeiro.

  2. Tests passed

    1,284 tests in 6 min 12 s.

  3. Slow migration

    The orders table took 4 min, the limit is 2.

  4. Health check failed

    3 of 8 pods returned 503.

  5. Rolled back to 2.7.4

    Traffic is back on the previous release.

Tones

Use tone to make problems stand out in a long history. The color is visual only, so the title still has to say what happened.

  1. Shipped

    Handed to FedEx, tracking 7712 9034 5521.

  2. Out for delivery

    The courier left the Newark hub.

  3. Delivered

    Signed for by the front desk.

Icons

An icon per kind of event helps people scan a long list. Pass it in icon, with aria-hidden: the title already says the same thing.

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Delivered

    Signed for by the front desk.

Machine-readable time

Pass dateTime next to time when software needs the exact date, like for sorting or adding it to a calendar. People still read the short form.

  1. Order placed

  2. Shipped

  3. Out for delivery

    The courier left the Newark hub.

    Current step

  4. Delivery

Current step

For a process still running, add aria-current="step" to the current item and leave future steps neutral. The badge shows it to everyone, not only by color.

  1. Marina Costa commented

    The client asked to split the payment in two.

  2. Invoice sent

    Emailed to billing@acmelogistics.com.

    View invoice INV-4029

Links and avatars

Children go under the description, so an event can link to what it changed. Name the list with aria-label when the page has more than one.

Showing 5 of 5 events

  1. Deploy started

  2. Tests passed

  3. Slow migration

  4. Health check failed

  5. Rolled back to 2.7.4

Filtering events

Pick Alerts. The list keeps its order, and a status line tells screen readers how many events are left, since the change happens away from the focus.

In context

A timeline usually sits in a card or a side panel, under the record it belongs to. These are whole pieces of UI you can copy, in the skin you picked.

Order #48920

Delivered

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

  3. Shipped

    Handed to FedEx, tracking 7712 9034 5521.

  4. Out for delivery

    The courier left the Newark hub.

  5. Delivered

    Signed for by the front desk.

Order trackingCard · Timeline · Badge

Ticket #3312: double charge

Resolved

  1. Ticket opened

    The customer was charged twice for the October plan.

  2. Assigned to Sofia Vance

    Billing team, level 2.

  3. Refund issued

    $49.00 back to the card. The customer was notified.

Support ticket historyCard · Timeline · Avatar · Badge

What's new

  1. Version 1.4.0

    Sub-accounts and automatic tax reports.

    Latest

  2. Version 1.3.2

    Fixes token refresh after a password change.

  3. Version 1.3.0

    Export reports to CSV and PDF.

ChangelogCard · Timeline · Badge

Guidelines

  1. Order placed

  2. Delivered

DoGive every event a real date and time.

People need to know when something happened, and dateTime gives software the same answer.

  1. Order placed

  2. Delivered

Don’t"A while ago" on every event.

Vague times can't be compared, so no one can tell how long a step took.

  1. Order placed

  2. Shipped

  3. Delivered

DoKeep one order: oldest or newest first.

Oldest first tells a process step by step; newest first suits activity feeds. Pick one per list.

  1. Shipped

  2. Delivered

  3. Order placed

Don’tEvents out of order.

The list is an <ol>, so screen readers announce each position, and a wrong order tells the wrong story.

Props

PropTypeDefaultDescription
toneTimelineTone"neutral"Color of the indicator. It is visual only (the indicator has aria-hidden), so the title must say what happened.
iconReactNode—Replaces the dot inside the indicator, like an icon or a small avatar. Hidden from screen readers.
titleReactNode—What happened, in a few words. Rendered as TimelineTitle.
descriptionReactNode—Details under the title. Rendered as TimelineDescription.
timeReactNode—When it happened, shown at the end of the row in a <time>.
dateTimestring—Machine-readable form of time, such as 2026-10-27T09:14.
childrenReactNode—Extra content under the description, like a link, a badge or a TimelineTime with dateTime.

Timeline takes the attributes of <ol>, and TimelineItem those of <li>, like aria-current. TimelineTitle and TimelineDescription take those of <p>, and TimelineTime those of <time>, like dateTime.

Styling hooks

Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the timeline itself.

Attributes

data-toneneutral · brand · success · warning · danger (on item and indicator)

Tokens it reads

Color

--cml-accent-text--cml-border-control--cml-card-border--cml-card-shadow--cml-danger--cml-fg--cml-fg-secondary--cml-success--cml-surface-raised--cml-warning

Shape & size

--cml-border-width--cml-radius-pill--cml-radius-popover

This component only

--cml-corner-shape--cml-timeline-dot-radius--cml-timeline-line

Accessibility

TabA timeline has no Tab stop. Tab only reaches links and buttons inside the events.
ProgressShows how far a task is, when the steps themselves don't matter.Data listLabel and value pairs for the details of one record.BadgeA short status, like Delivered or Resolved, next to the timeline's title.
Was this page helpful? · Edit this page on GitHub