Component Guide
Reusable UI primitives built on shadcn/ui with engineering-grade defaults.
Component Guide
SentinelGrid ships a curated set of components tailored for engineering operations dashboards. Every component is theme-aware, fully typed, and mobile-responsive.
Overview
Components live in three directories:
components/ui/— shadcn/ui primitives (Button, Card, Dialog, etc.)components/common/— SentinelGrid-specific building blocks (KpiCard, badges, page-header)components/charts/andcomponents/tables/— data visualization wrappers
KpiCard
The KpiCard is the workhorse of every dashboard. It renders a label, large value, optional delta with directional arrow, sparkline, and an accent-colored icon.
Active Incidents
Uptime
Avg MTTR
SLOs Healthy
5 at risk
<KpiCard
label="Active Incidents"
value={3}
delta={-2}
deltaLabel="vs last week"
icon={<ShieldAlert className="w-4 h-4" />}
accent="destructive"
/>Badges
SentinelGrid provides a family of typed badges for every domain status. Each badge accepts the literal type from lib/types.ts, ensuring invalid states are caught at build time.
SeverityBadge
IncidentStatusBadge
ServiceHealthBadge
DeploymentStatusBadge
AlertStatusBadge / SLOStatusBadge / TierBadge
<SeverityBadge severity="critical" />
<IncidentStatusBadge status="investigating" />
<ServiceHealthBadge health="operational" />
<DeploymentStatusBadge status="succeeded" />
<AlertStatusBadge status="firing" />
<SLOStatusBadge status="breached" />
<TierBadge tier="tier1" />Charts Preview
All chart wrappers live in components/charts/ and read theme tokens from useChartTheme(). See the Charts Guide for full details.
LatencyChart
VolumeChart
ErrorRateChart
DonutChart
HorizontalBarChart
MTTRTrendChart
RadialGauge
ComposedChart
Props Reference
KpiCard
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Uppercase label above the value |
| value | string | number | — | Primary metric value |
| unit | string | — | Optional unit suffix (e.g. %, ms) |
| delta | number | — | Percent change. Positive = green, negative = red |
| deltaLabel | string | — | Context for the delta (e.g. vs last week) |
| accent | primary | accent | success | warning | destructive | info | muted | primary | Color of the icon container |
| icon | ReactNode | — | Lucide icon to render in the accent box |
| sparkline | number[] | — | Mini trend chart on the right |
| hint | string | — | Secondary text under the value |
SeverityBadge
| Prop | Type | Description |
|---|---|---|
| severity | "critical" | "high" | "medium" | "low" | "info" | Severity level to render |
| size | "default" | "sm" | Compact size for inline use |
Type safety
lib/types.ts. This means a typo like status="supressd" fails at compile time instead of silently rendering an empty badge.