Uptime Bar

New

A status page row with one bar per day, a tooltip for each, and the overall uptime percentage.

motionutils@soultel/use-reduced-motion-safe

All systems operationalUpdated 2 min ago

APIOperational

DashboardOperational

WebhooksOperational

Installation

$ pnpm dlx shadcn@latest add @soultel/uptime-bar

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/uptime-bar.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/uptime-bar.tsx.

Usage

example.tsx10 lines

import { UptimeBar, sampleUptime } from "@/components/uptime-bar"

export function Status() {
  return (
    <div className="flex flex-col gap-6">
      <UptimeBar label="API" days={sampleUptime({ seed: 1 })} />
      <UptimeBar label="Dashboard" days={sampleUptime({ seed: 2 })} />
    </div>
  )
}

Props

Prop	Type	Default	Description
label	string	-	Service name.
days	UptimeDay[]	-	Oldest first: date, status, optional uptime percent and note.
mobileDays	number	30	Days shown when the row is narrower than 28rem.
colors	Partial<Record<UptimeStatus, string>>	-	Bar classes per status, e.g. { up: "bg-emerald-500" }.