## Free Shipping Progress (S—134)

A cart nudge showing how far you are from free shipping; the bar fills and the message flips when unlocked.

- URL: https://sundaeui.dev/components/free-shipping-progress
- 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/free-shipping-progress.json`
- Tags: free-shipping, upsell, cart, progress, e-commerce, threshold

“You’re $18 away from free shipping” with a bar that fills as the cart grows. Crossing the threshold flips the message with a tick and a small pop of the bar end.
A second tier (such as a free gift) can sit further along the same bar as a marker.

### Usage

```tsx
import { FreeShippingProgress } from '@/components/sundae/free-shipping-progress'

<FreeShippingProgress />
```

### Props

- `subtotal` (`number`, required): Cart subtotal in cents.
- `tiers` (`{ at: number; label: string }[]`, required): Thresholds in cents.
- `currency` (`string`, default `'USD'`): ISO currency.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Carts, mini-carts and checkout summaries.

### When not to use

- Stores without thresholds.

### Accessibility

- A progressbar with aria-valuetext of the message; unlocking is announced politely.
- Reduced motion removes the movement and keeps every state change.