Portfolio Balance
Total value with its allocation. The hide toggle is part of the component, not an app-level bolt-on — people check balances on trains. Allocation is computed from the values, never taken as a percentage prop.
src/components/ui/portfolio-balance.tsxAbout
From the component's own source, where it was written.
Total portfolio value with its allocation.
The hide toggle is not a novelty. People check balances on trains and in open-plan offices, and every serious wallet ships one — so it is part of the component rather than something each app bolts on.
Allocation is computed from the values given, never taken as a percentage prop. Two sources for the same number drift, and a bar that does not add to 100 is the kind of thing people screenshot.
Holdings below groupBelow collapse into "Other". A bar with forty one-pixel slivers communicates less than six slices and a remainder.
Install
npx astralyx-ui add portfolio-balance
Usage
import { PortfolioBalance } from '@/components/ui/portfolio-balance'
<PortfolioBalance holdings={holdings} change24h={2.1} />Composer
Change the props and the source below follows.
Total value
US$12,074.60
1.84%24h
- ETH-1.12%66%US$7,915.60
- SOL+5.87%18%US$2,140.00
- USDC+0.01%14%US$1,638.40
- Other3%US$380.60
<PortfolioBalance holdings={holdings} change24h={1.84} hidden={false} />Examples
Allocation
<PortfolioBalance holdings={holdings} change24h={1.84} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
PortfolioBalance
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| hidden | boolean | — | Masks every figure. Controlled or uncontrolled. |
| holdings | Holding[] | required | { id, symbol, value, amount?, change24h?, color?, icon? } where value is fiat. |
| change24h | number | — | Portfolio-level change, as a percentage. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| onHiddenChange | (hidden: boolean) => void | — | Masks every figure. Controlled or uncontrolled. |
| groupBelow | number | 0.03 | Share below which a holding folds into "Other" — forty one-pixel slivers say less than six slices and a remainder. |
| totalLabel | ReactNode | 'Total value' | — |
Types
Holding
Total portfolio value with its allocation.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| symbol | ReactNode | — |
| value | number | Fiat value. Allocation is derived from these. |
| amount? | ReactNode | — |
| change24h? | number | — |
| color? | string | — |
| icon? | ReactNode | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| allocation | derived | From the values themselves; a bar that does not add to 100 is the kind of thing people screenshot. |