Coconut Design System v3.11.0
home Home

Patterns

Dashboard widgets, data visualizations, charts, loading states, notifications, and reusable UI compositions.

Widget System

Configurable dashboard widgets with drag handles, size variants, and multiple content types. Widgets live inside a responsive .widget-grid (1→2→3 columns).

KPI Widgets — Value + trend + sparkline
Total Users drag_indicator
12,847
Registered accounts
trending_up +8.2%
Revenue drag_indicator
€48,320
This quarter
trending_up +12.5%
Error Rate drag_indicator
2.4%
Last 24 hours
trending_down -0.3%
Bar Chart Widget — CSS-only bar visualization
Weekly Traffic drag_indicator
1.2k
Mon
1.8k
Tue
2.4k
Wed
2.1k
Thu
2.6k
Fri
1.4k
Sat
0.9k
Sun
Breakdown pie_chart
67%API
API 44% Web 26% Mobile 17% Other 13%
Status List + Gauge Widgets
Service Status dns
API Gateway
Healthy
Database
Healthy
Cache Layer
Degraded
Worker Queue
Healthy
CDN Edge
Down
CPU Usage speed
72%
4 cores · 8 threads
Progress + Event List Widgets
Storage cloud
Database4.2 / 5 GB
Files12.8 / 50 GB
Logs1.1 / 2 GB
Recent Events notifications
check_circleDeploy completed
2m ago
person_addNew user signup
5m ago
warningRate limit reached
12m ago
errorPayment failed
18m ago
Response Time drag_indicator
84%
Under 200ms
Widget Sizes — size-1, size-2, size-3, size-full
Size 1
span 1 column
Size 1
span 1 column
Size 1
span 1 column
Size 2
span 2 columns
Size 1
span 1 column
Size Full
span entire row (1/-1)
<div class="widget-grid"> <div class="widget"> <!-- size-1 (default) --> <div class="widget size-2"> <!-- spans 2 columns --> <div class="widget size-full"> <!-- spans entire row --> </div> /* Bar chart: .bar-chart > .bar-chart-col > .bar-chart-bar */ /* Donut: .donut-chart with conic-gradient background */ /* Sparkline: <svg class="sparkline green"><polyline.../></svg> */ /* Gauge: .gauge > .gauge-fill + .gauge-mask + .gauge-value */ /* Progress: .progress-bar > .progress-fill.green */ /* Trend: .widget-kpi-trend.positive / .negative */ /* Drag: .widget-drag-handle (grab cursor) */

Charts & Data Visualization

Standalone chart components for any data display context.

Bar Chart — Monthly data
320
Jan
480
Feb
560
Mar
620
Apr
760
May
540
Jun
Donut Chart — Distribution
5types
Desktop 36% Mobile 28% Tablet 18% API 8% Other 10%
Progress Bars — Multiple sizes and colors
Upload Progress78%
Memory Usage92%
Disk Space45%
Build Progress63%
Stat Row — Horizontal metrics strip
2,847
Total Users
99.9%
Uptime
142ms
Avg Response
3
Open Alerts
Sparklines — Inline trend indicators
Uptrend
Downtrend
Volatile
Stable

Flow Diagram

1
Request
Client
User initiates action
2
Validate
API Gateway
Auth & permissions
3
Process
Service
Business logic
4
Respond
Client
Result delivered

Rack Diagram

Equipment Rack
U1
Power Unit Type A
U2
Network Switch 48-Port
U3
Gateway Dual Link
U4
Compute Node Primary
U5
Compute Node Secondary
U6
Storage Array RAID
U7
Patch Panel CAT6
U8

Skeleton Loading

Card Skeleton
Table Skeleton
Widget Skeleton

Toast Notifications

Slide-in toasts with colored border and icon
error
Critical
Service is unreachable. Check your connection.
warning
Warning
Storage usage has reached 85%.
info
Info
A new update is available for download.

Confirm Dialog

Destructive action confirmation
warning
Delete this item?

This action is permanent and cannot be undone. All associated data will be removed from the system.

Empty State

inbox
No data yet
Start by creating your first item.

Data Table with Toolbar

NameCategoryStatus
Project AlphaDevelopmentActivemore_vert
Project BetaStagingReviewmore_vert
Project GammaProductionActivemore_vert
1–3 of 24 results