# Shadcn Timeline blocks

> Timeline components for activity feeds, audit histories, release notes, and chronological workflow states.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/timeline
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/timeline.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/timeline.md
- Blocks: 9
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A dated activity feed of who did what, placed on the page, in a dropdown or in a side panel
- Onboarding milestones and approval steps marked completed, current or still pending
- Release notes and version history laid out as a dated changelog

## When not to use

- A bare list of dated steps to compose and style from scratch, with nothing prebuilt: use [Timeline](https://web.dev.reui.io/components/timeline.md) (`get_component("timeline")`)
- One record's detail or an edit form in a side panel, with no event history: use the [Sheet blocks](https://web.dev.reui.io/blocks/application/sheet.md)
- A day grouped audit log of access events with type filters and CSV export: use the [Users blocks](https://web.dev.reui.io/blocks/solutions/users.md)

## Agent notes

- Each `Timeline` is uncontrolled through `defaultValue`, and every `TimelineItem` whose `step` is at or below it gets `data-completed`
- Each page.tsx centers the root in a padded `min-h-svh` wrapper; render the root component alone inside your own layout

## Third-party libraries

- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), used by 4 of 9 blocks

## Blocks

- [Customer Activation](https://web.dev.reui.io/blocks/application/timeline/timeline-1.md): Vertical customer activation timeline with collapsible milestone cards and status indicators. Best for milestone cards that expand to show priority, status, assignees, comments and a due date, with a spinner on the active step.
- [Account Rollout](https://web.dev.reui.io/blocks/application/timeline/timeline-2.md): Vertical Account Rollout Timeline with Owner, Status Badges, Star Rating and File Attachments. Best for a narrow on page log of 4 rollout steps, each with its own colored dot node, an owner line, a dot tag and an optional file or score.
- [Finance Activity](https://web.dev.reui.io/blocks/application/timeline/timeline-3.md): Finance activity timeline with avatar nodes, status badges, attachments, and inline actions. Best for an on page finance log with actor photos as nodes, record ids as links, Review and Clear buttons and a participant overflow popover.
- [Team Activity Feed](https://web.dev.reui.io/blocks/application/timeline/timeline-4.md): Team activity feed timeline with avatars, attachments, progress, ratings, and per-event action menu. Best for an on page team feed mixing shared files, a meeting time chip, a mention, a due task and sprint progress, each with a row menu.
- [Release Changelog](https://web.dev.reui.io/blocks/application/timeline/timeline-5.md): Release changelog timeline with side date rail and color-coded type, impact, and change badges. Best for a version history with no people or controls, where a New, Improved, Fixed or Security type sets the type and impact tag colors.
- [Approval Workflow](https://web.dev.reui.io/blocks/application/timeline/timeline-6.md): Horizontal scrolling approval workflow timeline with file attachments, ratings, and owner avatars. Best for a sideways run of 8 approval phases in a snap scrolling area, with check, play or circle nodes, ETA times and a named action per step.
- [Activity Dropdown](https://web.dev.reui.io/blocks/application/timeline/timeline-7.md): Account rollout activity dropdown with scrollable vertical timeline and per-step badges. Best for a dropdown opened from a button, holding 10 rollout entries in a height capped scroll area under a count badge.
- [Team Activity Sheet](https://web.dev.reui.io/blocks/application/timeline/timeline-8.md): Slide-out team activity timeline panel in a right sheet with avatars, badges, and progress. Best for a floating right sheet of 12 mixed team events, from file shares to sprint progress, with a row menu on each and a close button.
- [Finance Activity Sheet](https://web.dev.reui.io/blocks/application/timeline/timeline-9.md): Inset right sheet with a scrollable finance activity feed timeline and avatar indicators. Best for a floating right sheet of 12 finance events with linked record ids, inline Review, Upload or Assign buttons and participant counts.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.