Portfolio overview

A React block (a whole screen) in Beamline's Blocks category.

What an account holds and how it is doing: the total that rolls as prices tick with today's change, value over time against a benchmark, allocation by asset or sector, daily profit and loss, and every holding with its value, cost, unrealised P&L and weight.

Use it for

The home screen of an investing, trading or treasury app: total value, performance, allocation and holdings.
Any account that holds several assets bought at different prices.

Not for

Leveraged positions with liquidation prices on a trading screen (positions-table in trading-terminal).
Browsing markets you don't hold (market-screener).
The record of orders and fills (order-history).

Anatomy

header: title, the total value (rolling) with today's change in money and percent, feed state, and the primary Deposit
figures: unrealised P&L, realised P&L for the period, cash, and the best and worst holding today
performance: value over the chosen range (1W · 1M · 3M · 1Y · All) with the benchmark dashed; value or return
allocation: a donut by asset or by sector with each slice's share
daily P&L: a bar per day for the range, gains and losses either side of zero
holdings: asset, amount, price, value, 24h change, cost, unrealised P&L in money and percent, weight, 7-day trend; a row opens the asset

Variants

0: room: one column under 56rem (figures two across); performance beside allocation from 56rem; daily P&L under them

States

loading (every panel held in its shape)
live (values move in place as prices tick)
stale (prices old: says how old, values stay)
an asset without a price (its value and P&L —, totals say how many are left out)
cost unknown (P&L —)
no holdings (what goes here, Deposit)

Keyboard

Tab: Deposit, the range, the value/return switch, the charts (each readable by arrows), allocation's by-asset/by-sector, the holdings table
Table: arrows between cells, Enter opens the asset

Motion

The total and figures roll to each new value; a change of range draws the line again; allocation slices grow from their share when switching by asset/sector. Ticks change values in place, rows never slide. Idle: nothing runs.

Props

Prop	Type	Default	Description
`holdings` (required)	`PortfolioHolding[]`	—	{ symbol, name, sector, amount, price, cost, change, history? } — price null when unknown, cost (total paid) null when unknown.
`cash`	`number \| null`	—	Uninvested cash in the account currency.
`performance`	`{ time: number; value: number \| null; benchmark?: number \| null }[]`	—	Account value over the range, oldest first.
`dailyPnl`	`{ day: string; pnl: number \| null }[]`	—	Profit or loss per day for the range.
`realised`	`number \| null`	—	Realised P&L in the range.
`range / defaultRange / onRangeChange`	`"1W" \| "1M" \| "3M" \| "1Y" \| "ALL"`	—
`benchmarkLabel`	`string`	`"Benchmark"`
`status / updatedAt`	`"loading" \| "live" \| "stale" / number \| null`	—
`currency`	`string`	`"USD"`
`onDeposit / onOpenAsset`	`() => void / (symbol: string) => void`	—
`className / classNames / style / ref`	`string / PortfolioClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react, @tanstack/react-virtual

Import

import { Portfolio } from "@/blocks/portfolio/portfolio";

Get it

Portfolio overview is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent