shadcn.io is not affiliated with official shadcn/ui
Overview Dashboard Block for React Aria
An analytics home in a fixed-height window: six saved views in a collapsible sidebar, a period select, four figures with their changes, a revenue area chart against the period before and each view's recent activity.
Installation
Overview
Give a subscription business its home screen with this overview dashboard for React with React Aria. A window framed by a hairline with a plus mark on each corner holds the Sidebar: the product's mark and workspace, a group of views (All customers, Trials, Paying and Churned) and a group of saved filters (Annual plans and Past due over 7 days), each with its customer count, and the signed-in person at the foot. The top bar names the open view and holds a Native Select for the period, 7, 30 or 90 days. The page follows both choices: four figures with a signed change against the period before (revenue as the headline, then active users, trial-to-paid conversion and MRR, each worked out from 180 days of typed series), a hand-built area chart of daily revenue with the previous period as a dashed line, and the view's latest activity, each event with an Avatar of initials. A polite line at the foot says what is on screen. The rail collapses to icons with tooltips, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Native Select, Badge, Avatar and Guides, with a CSS entrance only. For analytics tools, billing consoles and any app whose navigation is a set of saved views.
FAQ
Where do the figures come from?
From the six SEGMENTS at the top of the file. Each has 180 days of daily revenue, active users and trial-to-paid conversion, plus MRR at the end of each day, all generated from a seed so the numbers are the same on every load. A figure sums or averages the last 7, 30 or 90 days and compares it with the same number of days before; the chart draws the same two windows. Swap the generators for your own daily series and nothing else needs to change.
What stays local, and how do I connect it?
Everything. Choosing a view or a period only changes what the page shows, and nothing is tracked or fetched. Load each view's series from your analytics store, keep the same comparison with the period before, and point the views at your routes. The links are SidebarMenuButtons with href, which React Aria renders as a link. They point to # and a handler shows the view instead of navigating.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a view closes it. The page scrolls inside the window: the four figures sit two across with revenue on its own line, then the chart and the activity. The window keeps its height.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to its icons. Each icon keeps its link's full name for screen readers, with the customer count in it, and a tooltip shows the view and its count on hover or focus. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, each group of links is named by its label and the open view is marked as the current page. The figures are a list, the chart has a text summary and a hidden table with the two totals, and every change says it is against the period before. The page is a scrollable region you can reach with Tab, and one polite line reports the open view and period.
Why is the window a fixed height?
So the whole app fits on one screen, with its frame drawn around it: 576 px tall on phones and 736 px from the medium breakpoint. Only the parts inside scroll (the sidebar and the page), never the window or the page it sits on, and changing the view or the period never changes the window's height.