Status Bar · paneui

APIOperational88.14% uptime

60 days agoToday

Operational50
Degraded4
Outage5
Maintenance1

API status, last 60 days data
Period	Status	Details
Sat, Aug 15	Degraded	Elevated p95 latency
Sun, Aug 16	Operational	No incidents reported
Mon, Aug 17	Operational	No incidents reported
Tue, Aug 18	Operational	No incidents reported
Wed, Aug 19	Operational	No incidents reported
Thu, Aug 20	Operational	No incidents reported
Fri, Aug 21	Operational	No incidents reported
Sat, Aug 22	Outage	33 min of failed requests
Sun, Aug 23	Operational	No incidents reported
Mon, Aug 24	Operational	No incidents reported
Tue, Aug 25	Operational	No incidents reported
Wed, Aug 26	Operational	No incidents reported
Thu, Aug 27	Maintenance	Scheduled database upgrade
Fri, Aug 28	Operational	No incidents reported
Sat, Aug 29	Operational	No incidents reported
Sun, Aug 30	Operational	No incidents reported
Mon, Aug 31	Operational	No incidents reported
Tue, Sep 1	Operational	No incidents reported
Wed, Sep 2	Degraded	Elevated p95 latency
Thu, Sep 3	Outage	27 min of failed requests
Fri, Sep 4	Operational	No incidents reported
Sat, Sep 5	Operational	No incidents reported
Sun, Sep 6	Operational	No incidents reported
Mon, Sep 7	Operational	No incidents reported
Tue, Sep 8	Operational	No incidents reported
Wed, Sep 9	Operational	No incidents reported
Thu, Sep 10	Operational	No incidents reported
Fri, Sep 11	Operational	No incidents reported
Sat, Sep 12	Operational	No incidents reported
Sun, Sep 13	Operational	No incidents reported
Mon, Sep 14	Operational	No incidents reported
Tue, Sep 15	Operational	No incidents reported
Wed, Sep 16	Operational	No incidents reported
Thu, Sep 17	Operational	No incidents reported
Fri, Sep 18	Operational	No incidents reported
Sat, Sep 19	Operational	No incidents reported
Sun, Sep 20	Operational	No incidents reported
Mon, Sep 21	Operational	No incidents reported
Tue, Sep 22	Operational	No incidents reported
Wed, Sep 23	Operational	No incidents reported
Thu, Sep 24	Operational	No incidents reported
Fri, Sep 25	Outage	42 min of failed requests
Sat, Sep 26	Degraded	Elevated p95 latency
Sun, Sep 27	Operational	No incidents reported
Mon, Sep 28	Operational	No incidents reported
Tue, Sep 29	Operational	No incidents reported
Wed, Sep 30	Operational	No incidents reported
Thu, Oct 1	Operational	No incidents reported
Fri, Oct 2	Operational	No incidents reported
Sat, Oct 3	Outage	8 min of failed requests
Sun, Oct 4	Operational	No incidents reported
Mon, Oct 5	Degraded	Elevated p95 latency
Tue, Oct 6	Operational	No incidents reported
Wed, Oct 7	Operational	No incidents reported
Thu, Oct 8	Outage	20 min of failed requests
Fri, Oct 9	Operational	No incidents reported
Sat, Oct 10	Operational	No incidents reported
Sun, Oct 11	Operational	No incidents reported
Mon, Oct 12	Operational	No incidents reported
Tue, Oct 13	Operational	No incidents reported

DashboardOperational92.98% uptime

60 days agoToday

Dashboard status, last 60 days data
Period	Status	Details
Sat, Aug 15	Operational	No incidents reported
Sun, Aug 16	Operational	No incidents reported
Mon, Aug 17	Operational	No incidents reported
Tue, Aug 18	Operational	No incidents reported
Wed, Aug 19	Operational	No incidents reported
Thu, Aug 20	Operational	No incidents reported
Fri, Aug 21	Operational	No incidents reported
Sat, Aug 22	Degraded	Elevated p95 latency
Sun, Aug 23	Operational	No incidents reported
Mon, Aug 24	Operational	No incidents reported
Tue, Aug 25	Operational	No incidents reported
Wed, Aug 26	Operational	No incidents reported
Thu, Aug 27	Operational	No incidents reported
Fri, Aug 28	Degraded	Elevated p95 latency
Sat, Aug 29	Operational	No incidents reported
Sun, Aug 30	Operational	No incidents reported
Mon, Aug 31	Operational	No incidents reported
Tue, Sep 1	Operational	No incidents reported
Wed, Sep 2	Operational	No incidents reported
Thu, Sep 3	Degraded	Elevated p95 latency
Fri, Sep 4	Maintenance	Scheduled database upgrade
Sat, Sep 5	Operational	No incidents reported
Sun, Sep 6	Maintenance	Scheduled database upgrade
Mon, Sep 7	Operational	No incidents reported
Tue, Sep 8	Operational	No incidents reported
Wed, Sep 9	Operational	No incidents reported
Thu, Sep 10	Operational	No incidents reported
Fri, Sep 11	Maintenance	Scheduled database upgrade
Sat, Sep 12	Operational	No incidents reported
Sun, Sep 13	Operational	No incidents reported
Mon, Sep 14	Operational	No incidents reported
Tue, Sep 15	Operational	No incidents reported
Wed, Sep 16	Operational	No incidents reported
Thu, Sep 17	Operational	No incidents reported
Fri, Sep 18	Operational	No incidents reported
Sat, Sep 19	Operational	No incidents reported
Sun, Sep 20	Operational	No incidents reported
Mon, Sep 21	Operational	No incidents reported
Tue, Sep 22	Operational	No incidents reported
Wed, Sep 23	Operational	No incidents reported
Thu, Sep 24	Operational	No incidents reported
Fri, Sep 25	Outage	31 min of failed requests
Sat, Sep 26	Operational	No incidents reported
Sun, Sep 27	Operational	No incidents reported
Mon, Sep 28	Operational	No incidents reported
Tue, Sep 29	Operational	No incidents reported
Wed, Sep 30	Operational	No incidents reported
Thu, Oct 1	Operational	No incidents reported
Fri, Oct 2	Operational	No incidents reported
Sat, Oct 3	Operational	No incidents reported
Sun, Oct 4	Operational	No incidents reported
Mon, Oct 5	Operational	No incidents reported
Tue, Oct 6	Operational	No incidents reported
Wed, Oct 7	Degraded	Elevated p95 latency
Thu, Oct 8	Operational	No incidents reported
Fri, Oct 9	Operational	No incidents reported
Sat, Oct 10	Operational	No incidents reported
Sun, Oct 11	Operational	No incidents reported
Mon, Oct 12	Outage	45 min of failed requests
Tue, Oct 13	Operational	No incidents reported

Installation

pnpm dlx shadcn@latest add @paneui/status-bar

Usage

import { StatusBar } from "@/components/ui/status-bar"

<StatusBar
  title="API"
  label="API status, last 3 days"
  data={[
    { id: "d1", label: "Oct 11", status: "operational" },
    { id: "d2", label: "Oct 12", status: "degraded", description: "Slow p95" },
    { id: "d3", label: "Oct 13", status: "operational" },
  ]}
/>

Examples

Custom Statuses

Use when your states differ from the defaults.

Hourly

Use for short windows such as the last 24 hours.

Compact

Use when stacking several services in one view.

No Data

Use for periods before monitoring started.

Keyboard

Focus the bars, then ArrowLeft / ArrowRight move between periods, Home / End jump to the ends and Esc clears. On touch, tapping a bar shows its tooltip.

Motion

With reduced motion the bars don't stagger in and the status dot doesn't pulse.

API Reference

StatusBar

Also accepts every prop of section.

data*: { id: string; label: string; status: string; description?: string }[]; One bar per period, oldest first. status is a key of statuses.
statuses= STATUS_BAR_STATUSES: Record<string, { label: string; color: string; weight?: number | null }>; Status definitions. Each weight feeds the uptime figure (1 up, 0 down, null not counted); nodata is left out of uptime. Defaults to STATUS_BAR_STATUSES.
label= "Status history": string; Accessible name; also the header title fallback.
title: React.ReactNode; Service name in the header row; any node (e.g. name plus a badge). Replaces the HTML title tooltip attribute.
height= 36: number; Bar height in px.
gap= 3: number; Gap between bars in px.
showHeader= true: boolean; Show the status dot, title, current status and uptime.
showLegend= true: boolean; Show counts per status that appears.
startLabel= `${n} periods ago`: string; Caption under the left end.
endLabel= "Today": string; Caption under the right end.
activeId: string | null; Controlled inspected period.
defaultActiveId: string | null; Initially inspected period.
onActiveChange: (id: string | null) => void; Called when the inspected period changes.

Prop	Type	Default	Description
data*	{ id: string; label: string; status: string; description?: string }[]	—	One bar per period, oldest first. `status` is a key of `statuses`.
statuses	Record<string, { label: string; color: string; weight?: number \| null }>	STATUS_BAR_STATUSES	Status definitions. Each `weight` feeds the uptime figure (1 up, 0 down, `null` not counted); `nodata` is left out of uptime. Defaults to `STATUS_BAR_STATUSES`.
label	string	"Status history"	Accessible name; also the header title fallback.
title	React.ReactNode	—	Service name in the header row; any node (e.g. name plus a badge). Replaces the HTML `title` tooltip attribute.
height	number	36	Bar height in px.
gap	number	3	Gap between bars in px.
showHeader	boolean	true	Show the status dot, title, current status and uptime.
showLegend	boolean	true	Show counts per status that appears.
startLabel	string	`${n} periods ago`	Caption under the left end.
endLabel	string	"Today"	Caption under the right end.
activeId	string \| null	—	Controlled inspected period.
defaultActiveId	string \| null	—	Initially inspected period.
onActiveChange	(id: string \| null) => void	—	Called when the inspected period changes.

STATUS_BAR_STATUSES

The default statuses map. Spread it to add your own: { ...STATUS_BAR_STATUSES, partial: { … } }.