Shadcn UI Chart Group Block
ChartGroup14 is a comprehensive analytics bento dashboard combining multiple widget types. The header has a select dropdown for quick date presets plus a calendar button for custom ranges. The main grid contains stat cards with colored icons and change badges, an area chart for revenue, a donut chart for traffic channels, a top pages list with rankings, and an active users section with avatars.
Light card surfaces throughout with colored icon backgrounds in stat cards. Change indicators use green/red badges. The revenue chart spans two columns with gradient fill. The donut chart shows session distribution with a center stat. Top pages and active users lists have “View all” buttons. All data-driven sections respond to date range changes.
This is a production-ready analytics dashboard template. It combines date selection (dropdown + calendar), stat cards, charts, and lists in a cohesive bento layout. The select dropdown provides quick access to common ranges while the calendar allows custom selection. Each section is self-contained but visually unified.
The component generates 90 days of sample data. The grid is fully responsive, reorganizing on smaller screens. Static data for channels, pages, and users demonstrates list patterns.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| lucide-react | NPM |
| react | NPM |
| date-fns | NPM |
| react-day-picker | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |
calendar @shadcn | Registry |
popover @shadcn | Registry |
button @shadcn | Registry |
select @shadcn | Registry |
avatar @shadcn | Registry |
badge @shadcn | Registry |
progress @shadcn | Registry |