Back to components
Uptime Day Strip React component

What is this?

A white reliability tile: a label, a big uptime figure, and a slim strip of ninety daily ticks. When the card comes into view, the ticks rise from the left one after another. Healthy days are green, degraded days amber, and outages rose. Swap the label, figure, and days, then drop it into a status page, an SLA summary, or a reliability feature block.

Component

Uptime Day Strip

A white reliability tile: a label, a big uptime figure, and a slim strip of ninety daily ticks. When the card comes into view, the ticks rise from the left one after another. Healthy days are green, degraded days amber, and outages rose. Swap the label, figure, and days, then drop it into a status page, an SLA summary, or a reliability feature block.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0