Shadcn UI Dashboard Block
Dashboard5 is a general-purpose dashboard built with shadcn/ui components, featuring a collapsible sidebar and main content with stat cards with embedded sparklines, a revenue bar chart, a transactions table, and an activity feed. The sidebar has grouped navigation with collapsible submenus and a user profile section. The main header includes avatar, search, and notifications. Stat cards display key metrics with inline sparkline visualizations showing trend data. Below that is a bar chart for revenue flow by month, a simple transactions table, and a scrollable activity feed showing recent user actions with timestamps and avatars.
Card containers use rounded corners with subtle borders on a muted background. The distinctive feature is the sparkline embedded within each stat card, providing at-a-glance trend visualization without taking up additional space. The bar chart uses the primary color. The activity feed presents entries in a timeline format with avatar, action description, and relative timestamp. Light hover states on interactive elements.
This dashboard stands out for its sparkline stat cards that pack trend information into a compact format. The overall layout follows a conventional pattern but the inline sparklines add data density without complexity. Moderate complexity with the sparkline charts being the main code-driven element. Requires metric values with historical data points for sparklines, revenue time series, transaction records, and activity event logs.
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 |
table @shadcn | Registry |
tooltip @shadcn | Registry |