shadcn.io is not affiliated with official shadcn/ui
Investor Allocation Drift Profile Block for React Aria
An investor profile that shows five asset classes as weight bars against their targets, with the drift in points and a preview of the trades that would rebalance the portfolio.
Installation
Overview
Show how far a portfolio has wandered from its plan, with this investor profile for React with React Aria. Inside a hairline frame with a plus mark on each corner, the first band names the investor and says it is a sample portfolio, and a row of three figures gives the total value, the return this year and the largest drift. The next band lists five asset classes, each with its weight and its target in words, a drawn bar for the weight with a tick at the target, and the drift in points with a sign and an arrow, so it reads without colour. The band after it is held for the trades: until you press the foot's Shine Button, it says what pressing will show, and then the same space lists what to buy and sell to bring every class back to its target, largest first, with the totals under it. Nothing is traded. It's built from Badge, Avatar, Shine Button and Guides, with the bars drawn in CSS and a CSS entrance only. For a portfolio tracker, a wealth dashboard or a robo-adviser.
FAQ
How do I change the holdings and targets?
Edit HOLDINGS at the top: each class has a name, the dollars held and a target percent. Weights, drift, the trades and the three figures are worked out from them. Targets should add up to 100; if you pick values whose target amounts are whole dollars, the trades net to zero. TOLERANCE is how small a drift counts as on target, and SCALE is the weight at the bar's full length.
How are the trades worked out?
For each class the target amount is the total times the target percent, and the trade is that minus what is held: positive is a buy, negative a sell, zero a hold. They are listed largest first. The line under the list adds the buys and the sells, which match when the targets add up to 100.
What does Preview rebalance do?
It only shows the list. The status line says A preview, nothing is traded, and the button turns into Hide preview. The space for the list is reserved from the start, so the panel does not grow when you open it. To make it real, send the trades to your broker's API from a confirm step of your own.
Are these figures real?
No. The investor, the holdings, the targets and the return are invented, and the block says so in the first band and under the trades. It is illustrative, not advice.
Is it accessible?
Each class is a list item whose text gives the weight, the target and the drift, so the drawn bar is decoration and hidden from assistive technology. The preview button reports whether it is expanded and names the list it controls, the hidden list is inert, and the status line is a polite live region present from the start. Drift is a sign and an arrow, never only a colour.
How does it look on a phone?
Each class becomes two lines: its name and drift on the first, the bar full width on the second. The three figures stay in a row with smaller type, and the foot stays pinned to the bottom of the screen. Bars and the drift keep their direction in a right-to-left layout while the words flip.