Dashboard Preview

A live emulation of a dashboard built with the Coconut Design System. All components, layout, and tokens in action.

Live Dashboard

storefront

Coconut Services Dashboard v2.4

admin@coconutservices.fr

notifications

dark_mode

translate

logout

Main

Overview

Monitoring

Infrastructure

Inventory

Admin

Users

Settings

System status and key metrics at a glance.

Total Users

12,847

+12.5% trending_up

Revenue

$48.2K

+8.3% trending_up

Uptime

99.97%

Last 30 days

Open Issues

+3 this week

Traffic Overview

Last 7 days

Week Month

By Category

1.2K

Products42%

Services26%

Support17%

Recent Activity

View All

User	Action	Status	Time
Alice Martin	Deployed v2.4.1	Success	2 min ago
Bob Chen	Updated config	Success	15 min ago
Clara Dupont	Backup triggered	Pending	1h ago
David Kim	Login failed	Error	3h ago

Component	Token / Class	Usage
Topbar	`--topbar-h: 56px`	Fixed header with blur backdrop, logo, version badge, actions
Sidebar	`--sidebar-w: 240px`	Colored icon squares (28x28, 7px radius), section labels
KPI Cards	`.stat-card`	Metric + trend indicator + percentage change
Area Chart	SVG polygon + polyline	Gradient fill, rounded line, highlight dot
Donut Chart	`conic-gradient()`	CSS-only, center label, legend below
Data Table	`.docs-table`	Sortable columns, status badges, mono timestamps
Badges	`.badge`	Pill-shaped, semantic colors (green/orange/red)
Version Badge	Mono font, accent bg	Inline version indicator in topbar