## Countdown Timer (S—105)

Days, hours, minutes and seconds to a deadline; each digit rolls down independently as it changes.

- URL: https://sundaeui.dev/components/countdown-timer
- Category: Cards & data visualization · 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/countdown-timer.json`
- Tags: timer, clock, sale, launch, deadline, countdown

Only digits that change move, each rolling down into the next value, so the seconds column ticks while the rest stay still.
At zero it swaps to an ended message. Use it for launches, sales and event starts.

### Usage

```tsx
import { CountdownTimer } from '@/components/sundae/countdown-timer'

<CountdownTimer />
```

### Props

- `to` (`Date | number`, required): Target time.
- `labels` (`'short' | 'long'`, default `'short'`): Unit labels.
- `endedText` (`string`, default `'It’s live'`): Shown at zero.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Launch pages, sales banners, event tickets, auctions.

### When not to use

- Fake urgency: a countdown that resets on reload erodes trust.

### Accessibility

- The visible clock is aria-hidden; a visually hidden summary updates once a minute so screen readers are not flooded.
- Reduced motion swaps digits without rolling.
- Reduced motion removes the movement and keeps every state change.