Introduction
Open-source dashboard blocks for shadcn/ui. Install them with the shadcn CLI and own the code.
Dashboardblocks is a set of open-source dashboard blocks built on shadcn/ui. The shadcn CLI copies each block's source into your project, so you add only the blocks you use and can edit every line.
How it works
- Each block installs on its own with the shadcn CLI, along with the components and other blocks it needs.
- Blocks use your project's own
card,button,badgeand other components, so they take on your style. - Every block works with Base UI, Radix UI and React Aria, and with all five icon libraries. See Compatibility.
Dashboards
Full dashboards composed from the blocks, with header filters that scope every block below them.
Each dashboard is a single component you can install and adapt. Its header controls one query: the date range, comparison and filters. Every block below re-renders from that query, so the numbers always agree. While new data loads, the blocks stay in place, dimmed, instead of flashing skeletons.
The data comes from one function in each file (buildStoreData, buildSaasData, buildAnalyticsData, buildCrmData and buildOpsData). Replace it with your own queries; the blocks only need their props.
Store
Revenue, orders, average order value and conversion, with revenue over time, revenue by channel, top products, a checkout funnel, month-to-date revenue against its target and low stock. Filter by date range and region, and compare with the previous period.
npx shadcn@latest add @dashboardblocks/dashboard-01SaaS
MRR, active accounts, churn and NPS as metric tabs, an activity heatmap, MRR by region, MRR movement, retention milestones and live service status. Filter by date range and plan.
npx shadcn@latest add @dashboardblocks/dashboard-02Web Analytics
Visitors, page views and bounce rate as metric tabs, visitors right now, a traffic flow from source to outcome, top pages, top countries and browsers. Filter by date range and device.
Open the web analytics dashboard
npx shadcn@latest add @dashboardblocks/dashboard-03CRM
Bookings, win rate, deal size and sales cycle with sparklines, open pipeline by stage, monthly bookings, lead conversion, a quarter forecast by rep against quota, deal activity and stuck deals. Filter by date range and segment.
npx shadcn@latest add @dashboardblocks/dashboard-04DevOps
Live throughput, delivery performance against the DORA bands, response time percentiles, open alerts, 90-day uptime, build health and recent deployments. Filter by service; the date range scopes delivery performance and response times.
npx shadcn@latest add @dashboardblocks/dashboard-05