## Incident Timeline (S—381)

A status-page incident: current state, affected services, timestamped updates, and a composer to post the next one.

- URL: https://sundaeui.dev/components/incident-timeline
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/incident-timeline.json`
- Tags: timeline, devops, updates, status-page, uptime, incident

The incident moves through Investigating, Identified, Monitoring and Resolved. Each update is stamped and the newest sits on top of a vertical timeline.
Affected services show their own state; resolving clears them and states how long the incident lasted.

### Usage

```tsx
import { IncidentTimeline } from '@/components/sundae/incident-timeline'

<IncidentTimeline />
```

### Props

- `updates` (`{ status: string; text: string; at: string }[]`, required): Updates, oldest first.
- `services` (`{ name: string; state: string }[]`, required): Affected services.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Status pages, internal incident tools, customer comms.

### When not to use

- Multi-incident dashboards.

### Accessibility

- The timeline is an ordered list with times in <time> elements.
- The status change is announced.
- Reduced motion removes the movement and keeps every state change.