Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/uptime-bar.jsonUsage
import { UptimeBar } from "@/components/dithercn/uptime-bar";
const days = [
{ date: "2026-10-11", uptime: 1 },
{ date: "2026-10-12", uptime: 0.9962, note: "Elevated latency on writes." },
{ date: "2026-10-13", uptime: 1 },
];
export function ApiStatus() {
return <UptimeBar label="API" days={days} />;
}Pass one entry per day, oldest first. Each day's status comes from its uptime: 99.9% or more is up, 99% or more is degraded, and anything lower is an outage. Set status on a day to override that, or uptime: null for a day with no data.
Statuses differ in texture as well as colour. Up days use fill (a gradient that is dense at the base by default) in green, degraded days are hatched orange, outages are solid red and days without data are faint grey dots. bloom puts a soft glow behind degraded and down days only, so incidents stand out from a distance.
The row shows the last 30 days on narrow screens, 60 from 28rem wide and 90 from 42rem, based on the width of its container. The percentage on the right is the average over every day with data.
Examples
Status page
Several rows in one card. The Realtime service is newer than the window, so its early days have no data and show as faint dots.
Your own colours
colors overrides the colour of any status with a palette name or any CSS colour. This one draws up days as blue dots and degraded days in purple, with 3px cells and a high bloom on incidents.
Props
| Prop | Type | Default |
|---|---|---|
| label* The service name. | Type: string | Default – |
| days* { date: string; uptime: number | null; status?: UptimeStatus; note?: string }, oldest first. date is an ISO date. | Type: UptimeDay[] | Default – |
| colors Colours for "up", "degraded", "down" and "none", as palette names or CSS colours. | Type: Partial<Record<UptimeStatus, DitherColor>> | Default green, orange, red, grey |
| fill Texture of the up days. Degraded days are hatched, outages solid and days without data dotted. | Type: "gradient" | "dotted" | "hatched" | "solid" | Default "gradient" |
| bloom Soft glow behind degraded and down days. | Type: "off" | "low" | "high" | Default "off" |
| locale Locale for the dates in tooltips. | Type: string | Default "en-US" |
| matrix Threshold pattern of the gradient fill. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in CSS pixels. Small, so narrow bars still show a pattern. | Type: number | Default 2 |
Notes
- Status shows in texture as well as colour: up days use the fill, degraded days are hatched, outages solid and days without data dotted. The statuses stay apart for colour-blind readers and in greyscale.
- Each bar is a button with a full description, such as "Oct 9, 2026, Degraded, 99.62% uptime". Only one bar is in the tab order; the arrow keys, Home and End move between days, and Escape closes the tooltip. Tapping a bar shows its tooltip on touch screens.
- Dates are formatted in UTC, so the server and the browser agree.