Dashboard components for React and Next.js
Dashboard parts for products where the screen has to be read and acted on. The set covers the top of a screen, the KPI row and the headline figures, the middle where the charts and tables sit, and the navigation that holds it together. They are designed dark first, at the density operator screens actually run at.
11 components, installable with the shadcn CLI.
KPI Card Row
A KPI card row for SaaS, AI and API dashboards, with metrics like requests and uptime counting up over area charts you can scrub.
View componentMarket Heatmap
A stock market heatmap with tiles sized by market cap and tinted by the daily move, for market overview and trading dashboards.
View componentBalance Chart
A wallet balance chart for crypto and banking apps: an area line coloured by trend, with high and low marks and timeframes from 1H to All.
View componentHealth Gauge
A gauge chart for margin ratio, fear and greed or liquidity scores, on a 270 degree dial that counts up and cycles metrics on click.
View componentIndex Card
A market index card for the S&P 500, Dow, Nasdaq and Russell, with tabs between indices and an intraday line you can scrub.
View componentHoldings Table
A fund holdings table with market value, price, YTD return and portfolio weight bars, sortable by any column, for ETF and wealth apps.
View componentDonut Chart
A crypto portfolio donut chart that shows allocation as a ring with the total in the centre, the ring and its legend highlighting together.
View componentSankey Diagram
A Sankey diagram for cash flow, budgets and fund flows, where income pools in one hub and each ribbon width stands for the amount.
View componentSidebar
A collapsible sidebar navigation for SaaS admin panels and trading dashboards, with accordion sections, an active rail and a mobile drawer.
View componentmacOS Dock
A macOS style app dock with magnifying icons and a ⌘K command menu, for launchers and workspace switchers in trading and AI tools.
View componentMarket Snapshot
A stock price card with periods from 1D to All and a line chart you scrub for the price at any moment, for broker and market apps.
View component
Questions
- Can I use these with shadcn/ui?
- Yes. They install with the shadcn CLI, use the same token and class conventions, and drop into an existing shadcn project without a theme rewrite.
- Is there a full dashboard screen, not just parts?
- Yes. The library also sells composed screens, a portfolio book and a trade terminal among them, which are whole layouts rather than single components.
Browse by type
Install one in a minute
Every component here installs with the shadcn CLI and lands in your project as source you own.
Read the install guide