Shadcn UI Dashboard Block
Dashboard8 is an accounting-focused dashboard built with Shadcn UI, featuring a collapsible sidebar and main content with rich metric stat cards, multiple chart types, and an invoices table. The sidebar has grouped navigation with collapsible submenus and a user profile dropdown. The main area includes a header with search, help, notifications, and export buttons. Stat cards display financial metrics with detailed breakdowns and secondary values. A weekly revenue bar chart shows revenue versus expenses. Sales pipeline area charts display orders and sales by quarter. An income by category radar chart provides categorical breakdown. A traffic sources heatmap shows channel performance. The invoices table includes search, sorting by multiple columns, status filtering, and action menus per row.
Card containers have rounded corners with the primary color used as accent for key values. Charts use a coordinated color palette with the primary color and lighter tints. The radar chart provides a distinctive visualization for category comparison. The heatmap uses color intensity to represent traffic volumes. The invoices table has sortable column headers indicated by icons. Status badges use semantic colors. Typography varies between large headline numbers and smaller supporting text.
This is a highly complex dashboard with diverse chart types rarely seen together in one layout. The radar chart and heatmap provide analytical depth beyond typical bar and line combinations. The invoices table with multi-column sorting offers advanced data management. Complexity is code-driven through the variety of Recharts configurations. Requires financial metrics, time series revenue and expense data, quarterly sales data, category breakdowns for radar, channel traffic data for heatmap, and detailed invoice records.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
| recharts | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
chart @shadcn | Registry |
collapsible @shadcn | Registry |
dropdown-menu @shadcn | Registry |
input @shadcn | Registry |
select @shadcn | Registry |
sidebar @shadcn | Registry |
table @shadcn | Registry |
tooltip @shadcn | Registry |