Sage Analytics Dashboard

Sage Analytics Dashboard

A minimal, data-driven dashboard block for analytics platforms and SaaS products.

Features

• 4 metric cards — Each with icon, value, trend badge, and SVG sparkline
• Monthly chart — Bar chart with hover interactions and monthly labels
• Activity feed — Live feed with avatars, actions, and timestamps
• Tabbed navigation — Overview, Engagement, Revenue tabs
• Sage green palette — Emerald-600 accent on gray-50 background
• Responsive — Stacks gracefully from mobile to desktop
• Dark mode — Full zinc-950 dark variant

Dependencies

• @/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent
• @/components/vue-ui/badge — Badge
• @/components/vue-ui/separator — Separator
• @/components/vue-ui/tabs — Tabs, TabsList, TabsTrigger, TabsContent
• lucide-vue-next — Users, DollarSign, TrendingUp, Activity, BarChart3, ArrowUpRight, ArrowDownRight, Clock

Customization

• Metrics: Edit the metrics array for your KPIs
• Chart data: Modify chartData for different time periods
• Activity feed: Update activityFeed with your user actions
• Colors: Swap emerald classes for any Tailwind color scale