GitHubGitHub

Components and Widgets for data-heavy Svelte apps

Open-code Svelte 5 components — tables, date ranges, overlays, navigation — plus the dashboard widgets most libraries leave you to build. Source-first, themed with semantic CSS variables, and it never touches your stores or APIs.

Not a screenshotThe preview below is the live dashboard grid — drag a widget, then read the install docs.
4
Acme IncService overview
All systems

Requests

Last hour
normal
428.6/s
Target↑ 420 /s
↑ 6.4%

Success rate

Today
warning
94.2%
Target↑ 96 %
↓ 1.2%

CPU load

warning
warning: 75critical: 90Target 700100
Min69
Max78.4
Avg73.28

Response time

Response timemsRequests/s
import { DashboardGrid, DashboardGridItem } from '@chanrg/4ui/grid';import { Gauge, KpiCard, TimeSeriesChart } from '@chanrg/4ui';let layout = $state([  { id: 'kpi-0', x: 0, y: 0, w: 4, h: 3 },  { id: 'kpi-1', x: 4, y: 0, w: 4, h: 3 },  { id: 'gauge', x: 8, y: 0, w: 4, h: 6 },  { id: 'trend', x: 0, y: 3, w: 8, h: 3 }]);<DashboardGrid bind:layout editable>  {#each layout as item (item.id)}    <DashboardGridItem id={item.id} x={item.x} y={item.y} w={item.w} h={item.h}>      <!-- KpiCard / Gauge / TimeSeriesChart -->    </DashboardGridItem>  {/each}</DashboardGrid>
Components

52 accessible primitives: buttons, selects, combobox, data tables, date ranges, forms, overlays, and navigation — all Svelte 5 runes and typed props.

View components
Widgets

17 dashboard widgets — KPI cards, gauges, realtime charts, alert feeds, flow graphs, and a drag-and-drop grid that persists layouts as JSON.

View widgets