Status Grid

KPI dashboard with inline sparklines and status indicators. Use cases: Mission control dashboards, system health monitoring, fleet management, production line status, device telemetry overview.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add status-grid

Manual Installation

1. Copy the component code from components/status-grid.tsx

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Compound API - Simple Usage

Real-time flight systems monitoring using the simple compound component API. Live updates every second.

Altitude

35000.0ft

+2.5%

Range: 0 - 45000

Ground Speed

485.0kts

-1.2%

Fuel Remaining

12500.0lbs

-5.3%

Engine Temp

850.0°C

+0.5%

Oil Pressure

45.0psi

-2.1%

Hydraulics

3000.0psi

0.0%

Primitive API - Custom Composition

Build custom cards with full control using primitive components. Compose your own layouts and styles.

Altitude

35000.0ft

+2.5%

Fuel Remaining

12500.0lbs

-5.3%

Oil Pressure

45.0psi

-2.1%

Compact View (No Sparklines)

Condensed status display without sparklines. Perfect for space-constrained dashboards.

Altitude

35000.0ft

+2.5%

Ground Speed

485.0kts

-1.2%

Fuel

12500.0lbs

-5.3%

Engine Temp

850.0°C

+0.5%

Engine Monitoring Station

Critical engine parameters with high threshold warnings. Fast update rate for responsive monitoring.

RPM

2450.0rpm

+0.3%

EGT

750.0°C

+1.2%

Oil Temp

85.0°C

+0.8%

Loading example...