# Account Rollout block

> Vertical Account Rollout Timeline with Owner, Status Badges, Star Rating and File Attachments

Vertical activity timeline of onboarding milestones, each with date, action title, owner, colored status and risk badges, optional star rating and downloadable attachment. ReUI Timeline, Badge, Rating. Customer success, audit log, milestone feed.

- Type: Pro block
- Category: [Timeline](https://web.dev.reui.io/blocks/application/timeline.md)
- Page: https://web.dev.reui.io/blocks/application/timeline/timeline-2
- 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
- MCP: `get_block("timeline-2")`
- Built with: Badge, Button, Button Group, Rating, Timeline
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Agent notes

- Replace the inline `rolloutItems` array; each entry sets its node color with a Tailwind class in `color`
- The `FileAttachment` file and download buttons have no handler, so wire both to real file URLs
- `owner` holds only a `name` string shown as plain text, with no avatar field to fill

## When not to use

- Rollout steps that open from a button in a compact menu: use [Activity Dropdown](https://web.dev.reui.io/blocks/application/timeline/timeline-7.md) (`get_block("timeline-7")`)
- Entries led by the actor's photo with inline action buttons: use [Finance Activity](https://web.dev.reui.io/blocks/application/timeline/timeline-3.md) (`get_block("timeline-3")`)

## Install

```bash
npx shadcn@latest add @reui/timeline-2
```

## About Timeline blocks

### 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

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.