Dashboard — Analytics
Analytics dashboard with metric cards, recent orders table, and top pages with progress bars.
Analytics
Track your key metrics
Total Revenue
$45,231
+20.1% from last month
Active Users
2,350
+15.3% from last month
Churn Rate
2.4%
-0.8% from last month
New Orders
1,204
+8.2% from last month
Recent Orders
Latest 5 transactions
| Customer | Status | Amount |
|---|---|---|
AJ Alice Johnson alice@example.com Alice Johnson | paid | $240 |
BS Bob Smith bob@example.com Bob Smith | pending | $150 |
CW Carol White carol@example.com Carol White | paid | $890 |
ST Sam Torres sam@example.com Sam Torres | failed | $430 |
ED Eve Davis eve@example.com Eve Davis | paid | $120 |
Top Pages
By unique views this month
/docs/components/button14,230
/docs/getting-started9,810
/docs/components/card7,640
/docs/theming5,020
/pricing3,100
Installation
1
Run the CLI
$npx particleui-cli add dashboard-analytics
Usage
TSX
import { DashboardAnalytics } from "@/components/blocks/dashboard-analytics"
export default function Page() {
return <DashboardAnalytics />
}Props
| Prop | Type | Default | Required |
|---|---|---|---|
| title | string | — | yes |
| value | string | — | yes |
| delta | string | — | yes |
| positive | boolean | — | yes |
| icon | React.ReactNode | — | yes |
Details
Source filecomponents/blocks/dashboard-analytics.tsx
Typeblock
Categoriesdashboard, blocks
npm dependencieslucide-react
Registry depscard, badge, button, progress, avatar, table, select
Claude skill—