Components
Coal Series arranges a compact set of primitives—buttons, cards, data grids, dialogs, and telemetry widgets. Each example below is composed with Tailwind classes layered on top of the Coal token set so you can copy the snippet straight into any Next.js page.
Buttons
Card
Device integrity
Last scan completed 12 minutes ago
Healthy
Cards frame telemetry panes, summary KPI stacks, and configuration sections. They expose header, content, and footer slots for maximum flexibility.
Tabs
Tabs switch between live asset activity, remediation plans, and audit trails without losing context.
Data table
| Asset | Severity | Status |
|---|---|---|
| Gateway-nyc-core | Critical | Unpatched |
| Switch-lon-32 | High | Patching |
Dialog
Confirm quarantine
Isolate the host to block east-west movement. Automations resume once remediation is verified.
Telemetry widgets
Exposure score
3.4
34%
-0.8 vs last week · Benchmark 4.1
Threat radar
Live sweep over critical assets.
- Critical
- 3 surfaced this hour
- Watchlist
- 5 nodes monitored
Blast radius heatmap
Cells convey lateral movement risk between network segments. Hot zones trigger automated remediations.