## Trial Countdown (S—182)

A trial status card: a segmented bar of days used, what you keep and lose, and a CTA that firms up near the end.

- URL: https://sundaeui.dev/components/trial-countdown
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/trial-countdown.json`
- Tags: paywall, saas, trial, billing, upgrade, countdown

One segment per trial day, filled for days used. The copy shifts tone as the end nears: calm early, specific in the last three days (“Ends Friday. Your 4 projects stay, sharing turns off.”).
The CTA is outlined early and becomes the primary button in the final days.

### Usage

```tsx
import { TrialCountdown } from '@/components/sundae/trial-countdown'

<TrialCountdown />
```

### Props

- `totalDays` (`number`, default `14`): Trial length.
- `daysLeft` (`number`, required): Days remaining.
- `onUpgrade` (`() => void`): CTA handler.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- App sidebars, settings, billing pages during a trial.

### When not to use

- Modal interruptions: keep trial nudges non-blocking.

### Accessibility

- The bar is a meter with “9 of 14 days used”; urgency is in the text, not only in styling.
- Reduced motion removes the movement and keeps every state change.