DesignLayer
Uptime Signal Card
Back to components
What is this?
A dark status card with a large uptime figure (99.99% by default) above a row of daily ticks. The ticks rise in from left to right when the card scrolls into view, amber and red mark rough days, and today's tick pulses. Swap the figure, label, and tick list, then drop it into a status page teaser or an infrastructure feature grid.
Component
Uptime Signal Card
A dark status card with a large uptime figure (99.99% by default) above a row of daily ticks. The ticks rise in from left to right when the card scrolls into view, amber and red mark rough days, and today's tick pulses. Swap the figure, label, and tick list, then drop it into a status page teaser or an infrastructure feature grid.
Checking access…
Live PreviewVerified 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