Build a 90-day uptime status bar in React and Tailwind, from raw checks to the strip

The row of thin green bars on a status page is a day per bar, red for an incident, and one uptime number at the end. This page is the code side: bucket your monitor's checks into 90 UTC days on the server, keep days with no data as null, weight the headline number by checks, and render the strip as a Server Component with a CSS tooltip, so it ships no JavaScript.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: bucket the checks into days on the server

lib/uptime.ts

export type Check = { at: string; ok: boolean }; // one row per monitor check, ISO time
export type Day = { date: string; uptime: number | null; down: number; checks: number };

const DAY = 86_400_000;

// Bucket raw checks into exactly `days` UTC days, oldest first.
// A day with no checks stays null: no data is not a perfect day.
export function bucketDays(checks: Check[], days = 90, now = new Date()): Day[] {
  const today = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate());
  const start = today - (days - 1) * DAY;
  const out: Day[] = Array.from({ length: days }, (_, i) => ({
    date: new Date(start + i * DAY).toISOString().slice(0, 10),
    uptime: null,
    down: 0,
    checks: 0,
  }));
  for (const c of checks) {
    const t = Date.parse(c.at);
    if (Number.isNaN(t) || t < start) continue;
    const day = out[Math.floor((t - start) / DAY)];
    if (!day) continue; // later than today
    day.checks += 1;
    if (!c.ok) day.down += 1;
  }
  for (const d of out) d.uptime = d.checks ? (d.checks - d.down) / d.checks : null;
  return out;
}

// Weight by checks, not by days, so a day the monitor half missed counts half.
export function overallUptime(days: Day[]): number | null {
  let checks = 0;
  let down = 0;
  for (const d of days) {
    checks += d.checks;
    down += d.down;
  }
  return checks ? (checks - down) / checks : null;
}

Good to know

A day with no checks is null, not 100%. If you fill gaps with 1, a monitor that was down itself shows a perfect week, and the headline number goes up for the wrong reason.
Days are UTC. Most monitors bucket in UTC, and local time would move every label by a day for half your visitors. It also keeps the server and browser output the same, so there is no hydration warning.
overallUptime adds checks up instead of averaging the daily fractions. A day the monitor only ran for an hour then counts for an hour, not for a full day.
The colour thresholds are ours: 99.9% and up is green, 99% and up is amber, below is red. Set them to match the uptime you promise.
What we ran on October 27, 2026: every TypeScript file on this page type-checks with TypeScript 5.9.3 against @types/react 19, react 19.1.1 and next 15.5.28, in strict mode. Passing an array of strings as days fails the same check. bucketDays was run in Node with checks today, yesterday, before the window, after today and an unparseable time: 90 days, today at 50%, the out-of-range rows ignored. We didn't run the strip in a browser on this page; the same markup and animation were run for our blog post.

Step 2: render the strip without client JavaScript

UptimeStrip has no "use client". Each bar is a button inside a list item, so keyboard users can Tab through the days and screen readers hear the date and the numbers from aria-label. The tooltip is a span that shows on group-hover and group-focus-within, so there is no state and no effect.
The tooltip sits on the left edge for the older half of the strip and on the right edge for the newer half, so it never runs out of the card and needs no measuring. On phones the oldest 60 days are hidden with hidden md:flex, so 30 bars stay wide enough to tap.

app/status/page.tsx (Server Component)

import { bucketDays, overallUptime, type Check } from "@/lib/uptime";
import { UptimeStrip } from "@/components/uptime-strip";

export const revalidate = 300; // a 90-day history doesn't need per-second freshness

const services = ["API", "Dashboard", "Webhooks"];

export default async function StatusPage() {
  const rows = await Promise.all(
    services.map(async (name) => {
      const days = bucketDays(await getChecks(name));
      return { name, days, overall: overallUptime(days) };
    }),
  );
  return (
    <main className="mx-auto max-w-3xl space-y-4 p-6">
      {rows.map((r) => (
        <UptimeStrip key={r.name} name={r.name} days={r.days} overall={r.overall} />
      ))}
    </main>
  );
}

async function getChecks(service: string): Promise<Check[]> {
  // your monitor's rows for the last 90 days: a database table your cron job
  // writes, or a hosted checker's API
  void service;
  return [];
}

components/uptime-strip.tsx (no "use client")

import type { CSSProperties } from "react";
import type { Day } from "@/lib/uptime";

const pct = new Intl.NumberFormat("en-US", { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 3 });

function color(uptime: number | null) {
  if (uptime === null) return "bg-zinc-700";
  if (uptime >= 0.999) return "bg-emerald-500";
  if (uptime >= 0.99) return "bg-amber-400";
  return "bg-rose-500";
}

function label(d: Day) {
  const when = new Date(d.date + "T00:00:00Z").toLocaleDateString("en-US", { month: "short", day: "numeric", timeZone: "UTC" });
  if (d.uptime === null) return `${when}: no data`;
  return `${when}: ${pct.format(d.uptime)} uptime, ${d.down} of ${d.checks} checks failed`;
}

// No "use client": the tooltip is plain CSS (group-hover, group-focus-within),
// so the whole strip renders on the server and ships no JavaScript.
export function UptimeStrip({ name, days, overall }: { name: string; days: Day[]; overall: number | null }) {
  const phoneFrom = days.length - 30; // older days hide on phones
  return (
    <section className="rounded-xl border border-zinc-800 bg-zinc-950 p-4">
      <header className="mb-3 flex items-baseline justify-between text-sm">
        <h2 className="font-medium text-zinc-100">{name}</h2>
        <span className="tabular-nums text-zinc-400">{overall === null ? "No data" : `${pct.format(overall)} uptime`}</span>
      </header>
      <ol className="flex h-9 gap-[2px]" aria-label={`${name}, daily uptime, oldest first`}>
        {days.map((d, i) => (
          <li
            key={d.date}
            className={`group relative flex-1 ${i < phoneFrom ? "hidden md:flex" : "flex"}`}
            style={{ "--i": i } as CSSProperties}
          >
            <button
              type="button"
              aria-label={label(d)}
              className={`uptime-bar w-full rounded-[2px] ${color(d.uptime)} ${i === days.length - 1 ? "motion-safe:animate-pulse" : ""} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white`}
            />
            <span
              aria-hidden="true"
              className={`pointer-events-none absolute bottom-full z-10 mb-2 hidden w-max max-w-48 rounded-md border border-zinc-800 bg-zinc-900 px-2 py-1 text-xs text-zinc-200 group-hover:block group-focus-within:block ${i < days.length / 2 ? "left-0" : "right-0"}`}
            >
              {label(d)}
            </span>
          </li>
        ))}
      </ol>
      <div className="mt-2 flex justify-between text-xs text-zinc-500">
        <span className="md:hidden">30 days ago</span>
        <span className="hidden md:inline">{days.length} days ago</span>
        <span>Today</span>
      </div>
    </section>
  );
}

Step 3: the reveal, in CSS

Bars grow up from the baseline left to right, 6ms apart, so the last of 90 lands about half a second in. --i is set on each list item and the bar inherits it. Today's bar pulses with motion-safe:animate-pulse; the rest stay still. Everything turns off under prefers-reduced-motion.

app/globals.css (add under @import "tailwindcss")

@layer components {
  .uptime-bar {
    transform-origin: bottom;
    animation: uptime-in 400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i) * 6ms);
  }
}

@keyframes uptime-in {
  from {
    transform: scaleY(0.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uptime-bar {
    animation: none;
  }
}

Where Command-K Dashboard fits

A status strip usually lives on an Overview page next to KPIs and a revenue chart. Command-K Dashboard is a full four-page SaaS app (Overview, Invoices, Team, Revenue) you drive from a ⌘K palette, so the strip from this page drops into its Overview as one more card.
If you need an ops screen with a service map and a latency chart and want it free first, Orbit is MIT.

Orbit, the free ops dashboard: service map, latency chart, events table

Install

Copy from the zipPut react/src/components + react/src/data into src/, then none. React 19, Tailwind v4 and the Next.js App Router.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

commands: palette entries
onNavigate / onCommand: what a command does
hotkey: ⌘K on Mac, Ctrl+K elsewhere
data: your app data

How qodesign compares

qodesign vs shadcnblocksshadcnblocks is best for: assembling whole pages from ready-made sections.
qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Uptime Status Bars in React and Tailwind (90-Day Status Page Strip)

From the blog: Accessible Tooltip in React and Tailwind CSS Without a Library

Questions

How do I calculate uptime percentage for a status page?

Count the checks that passed and divide by all checks in the window, leaving out days with no checks. Averaging daily percentages is only right when every day had the same number of checks.

How many bars should an uptime strip show on mobile?

About 30. Ninety bars on a phone turn into hairlines you can't tap, so hide the older days below the md breakpoint and say how far back the strip goes.

Does the strip need to be a Client Component?

No. With a CSS tooltip it renders on the server and ships no JavaScript. You only need a client component if the bars update live.

How often should the status page refresh?

Every few minutes is plenty for a 90-day history. The page here uses revalidate = 300.

Does the dashboard work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.