# Finance Activity block

> Finance activity timeline with avatar nodes, status badges, attachments, and inline actions

Vertical finance feed of payouts, risk flags, invoices, ledger updates. Avatar nodes, dot plus colored status Badges, attachments, participant AvatarGroup, inline action Buttons. ReUI Timeline, Badge, shadcn Avatar, Button. Audit log, activity 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-3
- 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-3")`
- Built with: Avatar, Badge, Button, Button Group, Popover, Timeline
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Agent notes

- Replace `financeActivities` in data.ts; each entry's `avatar` is a remote photo URL shown as the node
- `ActivityTarget` turns a trailing id such as ACH-4182 into a link to #, so point it at your record route
- The Review and Clear `actions` and the `ActivityAttachment` buttons have no handler, so each only renders

## When not to use

- A day grouped audit log with expandable event details and CSV export: use [Access Audit Log](https://web.dev.reui.io/blocks/solutions/users/solution-users-6.md) (`get_block("solution-users-6")`)
- The same finance feed shown in a floating right sheet: use [Finance Activity Sheet](https://web.dev.reui.io/blocks/application/timeline/timeline-9.md) (`get_block("timeline-9")`)

## Install

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

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