Shadcn UI Dashboard Block
Dashboard6 is an operations-focused dashboard built with Shadcn UI, featuring a collapsible sidebar and main content area containing a summary stats grid, a category performance line chart with period tabs, and an order fulfillment progress panel. The sidebar has grouped navigation with collapsible submenus and a user profile dropdown. The main area includes a header with avatar, search, and notifications. A grid of summary stat cards displays metrics like total orders, revenue, customers, and average order value with trend indicators. The category performance section shows a multi-series line chart with week and month tab switchers. The fulfillment panel displays individual order progress using segmented progress bars.
Card containers have rounded corners on a muted background. The line chart uses multiple colors for different category series with a shared legend. The fulfillment panel features horizontal segmented bars where each segment represents a stage of fulfillment, with varying opacity to indicate progress. Period tabs above the chart allow switching between time granularities. Typography is compact with small labels and medium numeric values.
This dashboard emphasizes operational monitoring with its fulfillment progress visualization being the standout element. The segmented progress bars provide a visual way to track multiple orders through their delivery stages. Moderately complex with code-driven charts and the custom fulfillment visualization. Requires stat metrics with trends, category time series data for the chart, and order records with progress percentages and stage breakdowns.
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 |
sidebar @shadcn | Registry |
tooltip @shadcn | Registry |