Shadcn UI Dashboard Block
Dashboard10 is a multi-page dashboard layout built with Shadcn UI, featuring a horizontal top navigation with dropdown menus, a secondary sub-navigation strip, and main content area with stat cards, charts, an activity feed, and an orders table. The top navigation includes dropdown menus for different sections, a search input with keyboard shortcut indicator, and user controls. Below that is a sub-navigation with section tabs. The main area displays rich metric stat cards, an AOV scatter chart showing average order value distribution, a channel revenue horizontal bar chart, a revenue overview stacked bar chart comparing years, a timestamped activity feed, and a paginated orders table.
The layout differs from sidebar-based dashboards by using a top navigation bar with dropdown menus for primary navigation. Card containers have rounded corners on a muted background. Charts use the primary color palette with stacked bars for year-over-year comparison. The scatter chart provides a distinctive visualization for order value distribution. The activity feed uses avatars and relative timestamps. The mobile sheet component provides navigation access on smaller screens.
This dashboard represents a multi-page architecture with top navigation rather than the typical sidebar layout, making it suitable for applications with many top-level sections. The scatter chart and stacked bar comparison add analytical depth. Highly complex with diverse chart types, dropdown navigation, and responsive sheet navigation for mobile. Requires metrics with trends, order value distribution data, channel revenue data, year-over-year revenue time series, activity events, and order records.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
| recharts | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
chart @shadcn | Registry |
dropdown-menu @shadcn | Registry |
input @shadcn | Registry |
scroll-area @shadcn | Registry |
select @shadcn | Registry |
sheet @shadcn | Registry |
table @shadcn | Registry |