Nocturne Dashboard Hub

Nocturne Dashboard Hub

A sleek analytics dashboard with a midnight tech aesthetic.

Features

• Top bar — Nocturne Analytics branding with date range badge selector
• 4 KPI cards — Total Revenue ($1.24M), Active Users (48.2K), Conversion Rate (3.8%), Avg Session (4m 32s) with trend arrows and percentage changes
• Revenue Trends — CSS-only area chart with gradient fill and monthly labels
• Top Channels — 5 channel rows (Direct, Organic Search, Social Media, Email, Referral) with progress bars and revenue values
• Dark mode — Full dark: variant support with deep navy palette and cyan accents
• Typography — Space Mono (monospace) for data, IBM Plex Sans for body

Dependencies

• @/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent
• @/components/vue-ui/badge — Badge
• @/components/vue-ui/separator — Separator
• @/components/vue-ui/button — Button
• lucide-vue-next — TrendingUp, TrendingDown, Users, DollarSign, Activity, Clock, Calendar, BarChart3

Customization

• KPI data: Edit kpiCards array to change metrics
• Channels: Modify channels array to update revenue sources
• Chart shape: Adjust clip-path polygon points for different chart profiles
• Colors: Swap cyan accent (#06B6D4) for any brand color