# Crypto Portfolio block

> Crypto Portfolio Snapshot List with Period Tabs and Per-Asset Trend Badges

Crypto holdings card switching between Weekly and All Time tabs, listing coins with logo, price, up or down trend badge, value and holdings. ReUI Frame, Badge with shadcn Tabs, Button, Separator. Portfolio, watchlist, asset tracker.

- Type: Pro block
- Category: [List](https://web.dev.reui.io/blocks/application/list.md)
- Page: https://web.dev.reui.io/blocks/application/list/list-4
- MCP: `get_block("list-4")`
- Built with: Badge, Button, Frame, Separator, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Coin holdings with a unit price, a trend badge, a fiat value and a token balance per row, over an Add Asset button

## Agent notes

- Replace `portfolioPeriods` in data.tsx; `value` and `holdings` are display strings, not computed from `price`, so update all 3 together
- The Add Asset `Button` has no click handler; wire it to your buy, deposit or import flow
- `logoClassName` on each `PortfolioAsset` is never read, so the coin svg renders without a tinted tile

## When not to use

- Wallet transfers with sender or recipient addresses and 2 amounts on a swap: use [Wallet Transfers](https://web.dev.reui.io/blocks/application/list/list-6.md) (`get_block("list-6")`)
- Business KPIs such as orders and spend, each with a trend badge and a detail button: use [Order KPI List](https://web.dev.reui.io/blocks/application/list/list-1.md) (`get_block("list-1")`)

## Install

```bash
npx shadcn@latest add @reui/list-4
```

## About List blocks

### When to use

- A dashboard side panel of KPIs, funds, coins, investments or movers with a figure on every row
- A short wallet or crypto transaction history with a signed credit or debit amount on each row
- An integrations directory or picker with a connect or add button on every row

### When not to use

- Records or metrics laid out as separate tiles in a grid, one tile per record: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A single row layout of media, title and actions to compose a list of your own: use [Item](https://web.dev.reui.io/components/item.md) (`get_component("item")`)
- Headline metrics that each need an actions menu, a progress bar or a segmented gauge: use the [Stats blocks](https://web.dev.reui.io/blocks/application/stats.md)

### Agent notes

- Each page.tsx centers the block in a padded `min-h-svh` wrapper; drop it when the list goes into your own dashboard layout
- Every root component takes no props and renders constants from its `data` module; add props to pass in your own rows
- Every `FramePanel` pins its padding with an important utility, so changing the Frame `spacing` prop leaves those insets as they are

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.