Data & ChartsPro

Status Strip

A row of day bars from a status page — green when all was well, amber when degraded, red for an outage.

Usage

Service status

All systems normal

99.98%

uptime · 30 days

1 incident in 30 days

Hover a day for details

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  StatusStrip,
  StatusStripDay,
  StatusStripProps,
  StatusStripStatus,
} from "@wunderui/react"

Shorter 24 px strips stacked per service, each with its own uptime.

Components

Sep 9 – Oct 8, 2026

4 incidents

30 days agoToday

24 hourly bars with custom end captions; two slow hours in amber.

Sync jobs

Every 75 seconds · last 24 hours

99.8%

2 slow hours, 0 failed runs

Prop	Type	Default
days	{ date?: string; status: "up" \| "degraded" \| "down" \| "none"; label?: string }[]	—
startLabel	ReactNode	"30 days ago"
endLabel	ReactNode	"Today"
height	number	36
tooltip	boolean	true
onDayHover	(day \| null, index \| null) => void	—
animate	boolean	true