Shadcn UI Dashboard Block
Dashboard12 is a global analytics dashboard built with Shadcn UI, featuring a fixed collapsible sidebar and main content with KPI stat cards, an animated sales revenue bar chart, a customer segments bubble chart, a dotted world map visualization, and a recent orders card. The sidebar has grouped navigation with collapsible submenus and a user profile dropdown. The main area includes a header with search and notifications. KPI cards display metrics with trend indicators. The sales revenue chart uses animated bars. The customer segments card shows a proportional bubble chart. The world map uses a dotted representation with highlighted regions showing geographic user distribution. The recent orders card lists recent purchases with customer details and amounts.
Card containers have rounded corners on a muted background. The animated bar chart provides entrance motion on load. The dotted world map visualization is distinctive, rendered using the dotted-map library with dots representing landmasses and highlighted points for user locations. The bubble chart uses proportional circle sizes for segment comparison. Typography is compact with smaller labels and medium-weight values.
This dashboard stands out for its dotted world map visualization, which is a rare feature for showing geographic distribution. The combination with animated charts and bubble segmentation creates a globally-focused analytics view. Highly complex with the custom dotted-map integration being the primary unique element alongside Framer Motion animations. Requires KPI metrics, time series revenue data, customer segment breakdowns, geographic distribution data with lat/long coordinates, and recent order records with customer information.
Dependencies
| Package | Type |
|---|---|
| dotted-map | NPM |
| framer-motion | NPM |
| lucide-react | NPM |
| react | NPM |
| recharts | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
chart @shadcn | Registry |
collapsible @shadcn | Registry |
dropdown-menu @shadcn | Registry |
scroll-area @shadcn | Registry |
sidebar @shadcn | Registry |
tooltip @shadcn | Registry |