Shadcn UI Dashboard Block
Dashboard4 is a finance-oriented dashboard built with Shadcn UI, featuring a collapsible sidebar and main content area focused on revenue and cost analysis. The sidebar includes grouped navigation, nested submenus, and a user profile dropdown. The main content has a header with avatar, search, and notifications, plus date range controls. Below that are financial stat cards showing revenue, costs, and profit metrics with trend indicators. An area chart displays revenue over time with period tabs for switching between time ranges. A stacked bar chart shows cost breakdown by category. A comprehensive transactions table includes multiple filter dropdowns for status, date range, and payment method, search input, and pagination with URL state persistence.
Card containers have rounded corners on a muted background. Charts use a monochromatic color palette with the primary color and lighter tints. The transactions table features a multi-filter toolbar above the data rows. Status badges use semantic colors for transaction states. Period tabs above charts allow switching data views. Typography uses small labels with larger numeric values. Subtle shadows on cards provide depth separation.
This is a finance-focused dashboard with emphasis on cost analysis workflows. The multi-filter transactions table is more sophisticated than typical order tables, offering combined search with multiple dropdown filters. The cost breakdown stacked bar chart alongside revenue visualization provides comparative financial views. Moderately complex with code-driven charts and elaborate filter state management. Requires revenue time series, cost category breakdowns, and transaction records with status, date, and payment method fields.
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 |