Uptime Ticks
A status-page strip with one tick per day; point at or arrow to a day and its note is read out above.
uptime-ticks.tsxuptime-ticks.css
Checking access…
Overview
Each day is a tick: solid for operational, grey for degraded, hatched for an outage, so it reads in monochrome and for colour-blind people.
Hovering dims the rest and lifts the day under the pointer; its date and note replace the summary line. With the keyboard, one Tab reaches the strip and arrow keys walk the days.
When to use
- Status pages and service health cards.
- Any daily pass/fail history: builds, backups, check-ins.
When not to use
- Continuous values like latency: use a sparkline.
- More than about 120 days in a card: ticks get thinner than a pixel.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/uptime-ticks.json$
npx shadcn@latest add https://sundaeui.dev/r/uptime-ticks.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/uptime-ticks.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/uptime-ticks.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy uptime-ticks.tsx and uptime-ticks.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { UptimeTicks } from '@/components/sundae/uptime-ticks'
<UptimeTicks
title="api.acme.dev"
days={[{ date: '2026-11-02', status: 'up' }, { date: '2026-11-03', status: 'degraded', note: '4 min slow' }]}
/>Props
| Prop | Type | Default |
|---|---|---|
title*Service name. | string | — |
days*date, status and optional note, oldest first. | UptimeDay[] | — |
uptimeFigure top-right. Computed from days when omitted. | string | — |
shapeTall ticks or a dot grid. | 'bars' | 'dots' | 'bars' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Status is shown by fill pattern, not colour alone, and every tick has an aria-label like "Oct 23: 14 min outage".
- The strip is one tab stop with roving focus; the readout is a polite live region.
- Reduced motion removes the lift and readout fade.
Customization
- --fg, --mid and the hatch pattern set the three states.
- Pass 30, 60 or 90 days; ticks share the width.
Keyboard
- Tab
- Focus the strip (latest day)
- ← / →
- Previous or next day
- Home / End
- Oldest or latest day
FAQ
- Can I use colour for the states?
- Yes. Set background on [data-s="degraded"] and [data-s="down"]. Keep the hatch on outages so it still reads without colour.
- Where does the data come from?
- Anywhere. Map your monitor’s daily rollup to { date, status, note }.
- Is Uptime Ticks free?
- Uptime Ticks is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Uptime Ticks?
- Run npx shadcn@latest add https://sundaeui.dev/r/uptime-ticks.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Uptime Ticks support keyboard and screen readers?
- Status is shown by fill pattern, not colour alone, and every tick has an aria-label like "Oct 23: 14 min outage". The strip is one tab stop with roving focus; the readout is a polite live region.
- Does Uptime Ticks respect reduced motion?
- Reduced motion removes the lift and readout fade.
More like this
All data →Pulse KPI
Data · Understated- Pro
Heatmap Grid
Data · Understated Data Table
Data · Understated- Pro
Kanban Board
Data · Understated Usage Meters
Data · UnderstatedStacked Bars
Data · Refined