## Resend Code (S—125)

A “Didn’t get a code?” control with a countdown ring, a Resend that unlocks at zero and growing back-off.

- URL: https://sundaeui.dev/components/resend-code
- Category: Forms & inputs · 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/resend-code.json`
- Tags: resend, auth, 2fa, otp, verification, countdown

After sending, the link is disabled and a small ring drains with the seconds left. At zero it becomes Resend; each resend doubles the wait, capped, so people are not tempted to hammer it.
A sent confirmation names where the code went, with an option to change the destination.

### Usage

```tsx
import { ResendCode } from '@/components/sundae/resend-code'

<ResendCode />
```

### Props

- `destination` (`string`, required): Where the code was sent (masked).
- `cooldown` (`number`, default `30`): First wait in seconds.
- `onResend` (`() => Promise<void>`): Send again.
- `onChange` (`() => void`): Change destination.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Email or SMS verification, magic links, 2FA.

### When not to use

- Authenticator-app codes: nothing to resend.

### Accessibility

- The disabled state says how long is left; the count is announced at 10-second steps only.
- Resent confirmation is announced politely.
- Reduced motion removes the movement and keeps every state change.