shadcn.io is not affiliated with official shadcn/ui
Finance Dashboard Sidebar Block for React Aria
A brokerage watchlist in a fixed-height window with an inset page: seven tickers priced in USD, EUR or GBP, sorted from a menu, with the chosen ticker drawn as a line and Buy 10 queuing an order.
Installation
Overview
Give a trading app its whole shell with this finance dashboard sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds the Sidebar in its inset variant: the rail's tint fills the window and the page is a raised, rounded panel set into it. The rail is a watchlist of seven invented tickers, each with a price, a day change with a trend icon and a company name, and an Orders link with a badge for queued orders. A Select at the top of the rail converts every displayed price between USD, EUR and GBP with fixed demo rates, and a Menu in the top bar sorts the watchlist by name, change or price. The page draws the chosen ticker as a hand-built line over its last 30 sessions, with open, close, high and low in text under it. Buy 10, a Shine Button and the only colored control, queues an order, the Orders badge counts up and a status line says so. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Select, Menu, Empty, Avatar, Button, Shine Button and Guides, with a CSS entrance only. For brokerages, wallets, portfolio trackers and any app whose navigation shows live figures.
FAQ
Where do the prices and changes come from?
From TICKERS, the seven tickers at the top of the file, each with a 30-session series of closing prices in USD cents. A small seeded walk draws each series, so the numbers are the same on every load. A ticker's price is the last point, its day change is the last point against the one before, and the line, the open, the close, the high and the low on the page are all read from the same series. Nothing is typed twice. The names and symbols are invented, and no figure is a market price. In your app, feed the same shape from your quotes API.
How does the currency Select work?
Each currency holds a fixed demo rate against USD (1, 0.92 and 0.79), and every displayed price is the USD price in cents times the rate, rounded to the cent. The rail, the page and the order list all follow, and a line under the Select states the rate in use. The rates are typed in the file, so they never move. To use live rates, load them into the same array and keep prices in one base currency, converting only for display.
What stays in the page, and how do I connect it?
Everything. Buy 10 adds a queued order to the page's own list with the ticker's price at that moment, the sort menu reorders the rail, and reloading starts over. Nothing is traded or saved. Replace the handler with your order API and update the list from its response. The tickers are links to # whose handler shows the chart instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link. Point them at your routes and mark the current one with isActive.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The currency Select is in it with the watchlist. Escape or choosing a ticker closes the sheet and focus goes back to the menu button. The sort menu shrinks to its icon and keeps its name for screen readers, and the line, its figures and the status line stay on the first screen. The inset margins only apply from the medium breakpoint, so the page is edge to edge on a phone.
Why is the page a raised panel?
That is the Sidebar's inset variant. There is no SidebarInset in the block, because it renders a main element and your page already has one. The page is a plain div that wears the same classes, so it follows the rail: the panel's margin grows when the rail folds to icons. On a phone, where the rail is a sheet, the panel is a plain page.
Is it accessible?
The sidebar is a navigation landmark named after the product, with each group named by its label and the open ticker marked as the current page. Each link's name carries the symbol, the company, the price and the move in words ("up 1.24 percent"), so a trend never depends on the icon. The chart is an image with a text alternative that gives its range, and its figures are in a list of terms below it. One polite status line reports each change, and prices are isolated so they read in order in a right-to-left layout.