# Timeline and activity feed

An order's history as a vertical timeline (placed, paid, cutting started…) and the activity feed grouped by day.

- **Group:** Data display · **family:** `data-display` · **shadcn:** composed
- **Build:** Custom list.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** no. 

## Content rules

- Past tense, who first: "Camilla marked it Paid".

## Do

- Group by day.

## Don't

- Show raw event names.

## Accessibility

- **Keyboard:** Links inside events.
- **ARIA:** `<ol>`; times in `<time>`.
- **Focus:** —

## Tokens

`--s-1` `--secondary-border` `--primary` `--r-pill` `--s-3` `--s-4` `--border` `--background` `--muted-foreground` `--success` `--status-soft-alpha` `--info` `--warning` `--primary-foreground` `--s-2` `--w-semibold` `--text-body` `--font-ui` `--text-small` `--w-medium` `--text-micro` `--font-voice` `--font-stretch-title` `--foreground` `--muted`

## Files

`timeline.html` live specimen · `timeline.css` kit rules · `timeline.d.ts` props · full page: `docs/components/timeline/` (phone: `m/`).