STATUS GRID

System health board for dashboards. Each row shows a service name with a live status dot and label. Supports 1–3 column layouts.

PREVIEW

SHIP SYSTEMS

LIFE SUPPORT

ACTIVE

NAVIGATION

ACTIVE

WEAPONS ARRAYmaintenance

OFFLINE

SHIELD EMITTER61%

WARNING

WARP CORE

SCANNING

COMM RELAY

ACTIVE

HULL PLATINGsector 7

WARNING

REACTOR COOLANToverheat

CRITICAL

INSTALLATION

BASH

npx shadcn@latest add @scificn/status-grid

USAGE

TSX

import { StatusGrid, type SystemEntry } from '@/ui/status-grid'

const systems: SystemEntry[] = [
  { name: 'API GATEWAY',   status: 'ACTIVE' },
  { name: 'DATABASE',      status: 'ACTIVE' },
  { name: 'AUTH SERVICE',  status: 'WARNING', detail: 'latency spike' },
  { name: 'CDN',           status: 'ACTIVE' },
]

<StatusGrid
  systems={systems}
  title="INFRASTRUCTURE"
  columns={2}
/>

COLUMNS

columns=1

LIFE SUPPORT

ACTIVE

NAVIGATION

ACTIVE

columns=2

LIFE SUPPORT

ACTIVE

NAVIGATION

ACTIVE

WEAPONS ARRAYmaintenance

OFFLINE

SHIELD EMITTER61%

WARNING

columns=3

LIFE SUPPORT

ACTIVE

NAVIGATION

ACTIVE

WEAPONS ARRAYmaintenance

OFFLINE

SHIELD EMITTER61%

WARNING

WARP CORE

SCANNING

COMM RELAY

ACTIVE

STATUSES

STATUS REFERENCE

ACTIVEnominal operation

ACTIVE

SCANNINGpulsing dot, in progress

SCANNING

WARNINGdegraded or partial

WARNING

CRITICALfailure or overheat

CRITICAL

OFFLINEpowered down

OFFLINE

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
systems	SystemEntry[]	—	Array of system entries to display.
title	string	undefined	Optional header label shown above the grid.
columns	1 \| 2 \| 3	1	Number of columns in the grid layout.
className	string	—	Additional classes merged via cn().

SYSTEMENTRY FIELDS

PROP	TYPE	DEFAULT	DESCRIPTION
name	string	—	Service or system name displayed on the left.
status	ACTIVE \| OFFLINE \| WARNING \| CRITICAL \| SCANNING	—	Controls the dot color, glow, and status label.
detail	string	undefined	Optional muted secondary text shown beside the name.