Shadcn UI Dashboard Block
Dashboard2 is an e-commerce operations dashboard built with Shadcn UI, featuring a collapsible sidebar and a main content area organized into stat cards, a revenue segmentation panel, and a paginated orders table. The sidebar includes grouped navigation with nested menus, a logo section, and a user profile dropdown. The main area has a header with user avatar, search, and notifications, followed by a welcome section with date range controls. Four stat cards display key metrics with trend indicators. A segmentation panel shows revenue breakdown by channel with interactive hover highlighting. The orders table includes search, status filtering via dropdown, and pagination controls with URL state persistence.
The design uses card-based sections on a muted background with consistent border radii. The segmentation panel features a proportional bar visualization where hovering a segment highlights it and dims others. The orders table has status badges with semantic colors for different order states. Charts use a monochromatic primary color palette. Typography is restrained with small labels and medium-weight values. Hover states provide subtle feedback throughout.
This is a moderately complex dashboard focused on order management workflows. The interactive segmentation panel with hover highlighting is a distinctive feature that helps users quickly scan revenue distribution. The orders table with combined search, filter, and pagination is a complete data management interface. Complexity is code-driven through the hover state logic and URL-synced filter state. Requires order data with status, amounts, and timestamps, plus channel-level revenue breakdowns to populate.
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 |
select @shadcn | Registry |
sidebar @shadcn | Registry |
table @shadcn | Registry |
tooltip @shadcn | Registry |