## Uptime Ticks (S—069)

A status-page strip with one tick per day; point at or arrow to a day and its note is read out above.

- URL: https://sundaeui.dev/components/uptime-ticks
- Category: Cards & data visualization · Art direction: Understated
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/uptime-ticks.json`
- Tags: devops, uptime, chart, status, incidents, monitoring

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.

### Usage

```tsx
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

- `title` (`string`, required): Service name.
- `days` (`UptimeDay[]`, required): date, status and optional note, oldest first.
- `uptime` (`string`): Figure top-right. Computed from days when omitted.
- `shape` (`'bars' | 'dots'`, default `'bars'`): Tall ticks or a dot grid.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### 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.

### 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.

### 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 }.