Data dashboards that actually look good. KPIs, charts, tables — all the analytics components you need.
Analytics Dashboard with Charts
Full analytics dashboard with 4 chart types, KPI cards, and data tables. Uses Recharts or Chart.js.
▲ v0🖱️ Cursor📋 2,234 copies
Build a data analytics dashboard:
**Layout:**
- Fixed sidebar (240px): Dashboard, Analytics, Reports, Settings
- Top header: date range picker + export button
- Main area: responsive grid
**KPI Cards (4 cards):**
- Total Revenue: $124,592 (+12.5%)
- Active Users: 8,429 (+3.2%)
- Conversion Rate: 3.24% (-0.8%)
- Avg Session: 4m 32s (+15%)
- Each: metric, trend arrow, sparkline
**Charts:**
- Revenue: Line chart (30 days)
- Traffic Sources: Donut chart (Organic/Paid/Social/Direct)
- User Activity: Bar chart (hourly)
- Geographic: World map with bubbles
**Data Table:**
- Top pages by traffic
- Sortable columns
- Pagination
- Export CSV
**Filters:**
- Date: Today/7D/30D/90D/Custom
- Segment: All/New/Returning
- Device: All/Desktop/Mobile/Tablet
Use Recharts. Dark theme. Subtle animations.
Real-time Metrics Dashboard
Live updating metrics with WebSocket or polling. Perfect for SaaS dashboards that need real-time data.
▲ v0🖱️ Cursor📋 876 copies
Create a real-time dashboard:
**Live Metrics (auto-refresh every 5s):**
- Active users right now
- Requests per second
- Error rate (%)
- Response time (ms)
**Real-time Chart:**
- Rolling 60-second line chart
- Smooth entry animation for new points
- Color code: green (good), yellow (warning), red (error)
**Live Feed:**
- Scrolling list of recent events
- Timestamp, event type, details
- Max 50 items, auto-scroll
**Connection Status:**
- Green dot + "Live" when connected
- Red dot + "Disconnected" + "Reconnecting..." when not
**Design:**
- Dark theme
- Monospace numbers for metrics
- Subtle pulse animation on updates
Use setInterval or WebSocket for updates
Data Table with Sorting & Pagination
Fully-featured data table. Sort, filter, paginate, row selection, and export. Essential admin component.
▲ v0📋 654 copies
Build a data table component:
**Columns:**
- Checkbox (for bulk select)
- User name (with avatar)
- Email
- Role (badge: Admin/Editor/Viewer)
- Status (Active/Inactive)
- Last active
- Actions (Edit/Delete)
**Features:**
- Column sorting (click header)
- Search/filter input
- Items per page: 10/25/50/100
- Pagination: 1 2 3 ... 10 [Next]
- Row hover highlight
- Select all checkbox
**Bulk Actions:**
- Select multiple → Delete / Export / Change role
**Empty State:**
- "No results found"
- Clear filters button
**Design:**
- Striped rows option
- Sticky header on scroll
- Smooth transitions
Use TanStack Table (React Table) logic
Financial Reports Dashboard
Revenue, MRR, churn, LTV — the metrics that matter. Great for SaaS financial overview.
▲ v0🖱️ Cursor📋 543 copies
Create a financial dashboard:
**Key Metrics (top row):**
- MRR: $45,200 (+8.2% MoM)
- ARR: $542,400
- Churn Rate: 2.1% (-0.3%)
- LTV: $1,240
- CAC: $180
- LTV:CAC Ratio: 6.9x
**Charts:**
- MRR Growth: Area chart (12 months)
- Revenue by Plan: Stacked bar (Free/Pro/Enterprise)
- Churn Trend: Line chart
- Customer Distribution: Donut (by size)
**Tables:**
- Recent Invoices table
- Failed Payments table
**Export:**
- Download as CSV/PDF
- Scheduled email reports
**Filters:**
- Date range
- Plan type
- Customer segment
Connect to Stripe API for real data