Widgets — Coconut Design System

KPI Widgets

Large mono value with trend indicator and inline sparkline. Drag handle for repositioning.

<div class="widget">
  <div class="widget-header">
    <span class="widget-title">Metric</span>
    <span class="material-symbols-outlined widget-drag-handle">drag_indicator</span>
  </div>
  <div class="widget-content">
    <div class="widget-kpi-value">1,234</div>
    <div class="widget-kpi-label">Description</div>
    <div class="widget-kpi-trend positive">+8.2%</div>
    <svg class="sparkline green" width="80" height="24">
      <polyline points="0,20 10,14 20,18 ..."/>
    </svg>
  </div>
</div>

Area Chart

SVG-based area/line chart for time-series data. Gridlines, axis labels, gradient fill.

<!-- Full-width area chart with gridlines -->
<div class="widget size-full">
  <svg viewBox="0 0 600 200" style="width:100%;height:auto;">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.3"/>
        <stop offset="100%" stop-color="var(--accent)" stop-opacity="0.02"/>
      </linearGradient>
    </defs>
    <polygon points="..." fill="url(#grad)"/>   <!-- filled area -->
    <polyline points="..." stroke="var(--accent)" stroke-width="2.5"/>  <!-- line -->
    <circle cx="..." cy="..." r="3" fill="var(--accent)"/>  <!-- data point -->
  </svg>
</div>

/* Compact area chart (no gridlines): just polygon + polyline */
/* Colors via gradient stops: --accent, --green, --orange, --red */

Bar Chart

CSS-only bar visualization with values, color variants, and responsive sizing.

<div class="bar-chart">
  <div class="bar-chart-col">
    <div class="bar-chart-value">1.2k</div>
    <div class="bar-chart-bar" style="height:45%"></div>
    <div class="bar-chart-label">Mon</div>
  </div>
  ...
</div>
/* Colors: default (accent), .green, .red, .orange, .purple */
/* Heights: default 120px, .sm 60px, or inline style */

Donut Chart

CSS conic-gradient donut with center label. Three sizes: sm (64px), default (100px), lg (140px).

Small (64px)

75%

Default (100px)

67%API

Large (140px)

5types

With legend

5types

Desktop 36% Mobile 28% Tablet 18% API 8% Other 10%

<div class="donut-chart lg" style="background:conic-gradient(
  var(--accent) 0deg 130deg,
  var(--green) 130deg 230deg,
  var(--gray-300) 230deg 360deg
)">
  <span class="donut-chart-center">67%<span class="donut-chart-label">Label</span></span>
</div>
/* Sizes: .sm (64px), default (100px), .lg (140px) */

Gauge

Semicircle gauge indicator for percentage-based metrics.

Low (32%)

32%

Medium (72%)

72%

High (94%)

94%

Sparklines

Inline SVG trend indicators, lightweight and theme-aware.

Default (accent)

Green (uptrend)

Red (downtrend)

Orange (volatile)

<svg class="sparkline green" width="100" height="28" viewBox="0 0 100 28">
  <polyline points="0,24 12,20 24,22 36,14 48,18 60,10 72,12 84,6 100,2"/>
</svg>
/* Colors: default (accent), .green, .red, .orange */

Progress Bars

Sizes and color variants

Large bar (12px)78%

Default bar (8px)92%

Small bar (4px)45%

Stat Row

Horizontal metrics strip for key numbers at a glance.

2,847

Total Users

99.9%

Uptime

142ms

Avg Response

3

Open Alerts

Status List Widget

Storage & Event Widgets

Widget Sizes

Grid column spans: size-1 (1 col), size-2 (2 col), size-3 (3 col), size-full (entire row).