Dashboard
A composable dashboard block with stats grid, charts section, and data table. Perfect for admin dashboards and analytics overviews.
Installation
$ npx shadcn@latest add @orecus/dashboardRegistry:
@orecus/header@orecus/stat-card@orecus/chart@orecus/card@orecus/entity-table
Component
Dashboard Block
Dashboard
Overview of your store performance
Total Revenue
This Month
vs last month
Active Users
This Month
vs last month
Orders
This Month
vs last month
Revenue Overview
Monthly revenue trend
Sales by Category
Distribution across categories
Recent Orders
Latest customer orders
| Customer | Product | Amount | Status | Date |
|---|---|---|---|---|
| John Doe | MacBook Pro 16" | $2,499 | completed | 2024-01-15 |
| Jane Smith | iPhone 15 Pro | $1,199 | completed | 2024-01-15 |
| Bob Johnson | AirPods Pro | $249 | pending | 2024-01-14 |
| Alice Brown | iPad Air | $799 | completed | 2024-01-14 |
| Charlie Wilson | Apple Watch | $399 | cancelled | 2024-01-13 |
Minimal Dashboard
Quick Stats
Key metrics at a glance
Revenue
Today
Visitors
Today
Orders
Today
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Dashboard compound components (Dashboard.Header, Dashboard.Stats, etc.) |
className | string | — | Additional CSS classes for the container |
Compound Components
Dashboard.Header
Header with title, description, and actions. Extends Header component props.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Header title |
description | string | — | Header description |
icon | LucideIcon | — | Header icon |
actions | ReactNode | — | Actions to display on the right side |
className | string | — | Additional CSS classes |
Dashboard.Stats
Grid of stat cards with configurable columns.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Stat cards to display |
columns | 2 | 3 | 4 | 4 | Number of grid columns |
className | string | — | Additional CSS classes |
Dashboard.Charts
Charts section with single, split, or triple layout.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Chart components to display |
layout | 'single' | 'split' | 'triple' | 'split' | Layout mode |
className | string | — | Additional CSS classes |
Dashboard.Table
Data table or grid section.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Table or grid content |
className | string | — | Additional CSS classes |
Dashboard.Section
Custom section with optional title and actions.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Section content |
title | string | — | Section title |
description | string | — | Section description |
actions | ReactNode | — | Actions for the section header |
className | string | — | Additional CSS classes |