Shadcn UI Dashboard Block
Dashboard7 is an order management dashboard built with shadcn/ui components, featuring a collapsible sidebar and main content area containing a stats grid, a category performance line chart, and a paginated orders table. The sidebar has grouped navigation with collapsible submenus and a user profile section. The main area includes a header with avatar, search, and notifications. A grid of stat cards shows key metrics with trend indicators. The category performance section displays a multi-series line chart comparing different product categories over time, with period tabs for week and month views. The orders table includes status filtering, search, and pagination with URL state persistence.
Card containers use rounded corners and subtle borders on a muted background. The line chart uses distinct colors for each category series. The orders table features status badges with semantic coloring and a filter dropdown above the data. Pagination controls show row ranges and navigation buttons. Typography is restrained with small labels and medium-weight metrics.
This is a standard order management layout with the performance chart providing category comparison insights. The combination of summary stats, trend visualization, and data table covers typical e-commerce monitoring needs. Moderate complexity with code-driven charts and URL-synced table filtering. Requires metrics with trends, category time series data, and order records with status fields and amounts.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
| recharts | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
chart @shadcn | Registry |
collapsible @shadcn | Registry |
dropdown-menu @shadcn | Registry |
input @shadcn | Registry |
scroll-area @shadcn | Registry |
select @shadcn | Registry |
sidebar @shadcn | Registry |
table @shadcn | Registry |
tooltip @shadcn | Registry |