Free Shipping Progress
A cart nudge showing how far you are from free shipping; the bar fills and the message flips when unlocked.
free-shipping-progress.tsxfree-shipping-progress.css
Checking access…
Overview
“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.
When to use
- Carts, mini-carts and checkout summaries.
When not to use
- Stores without thresholds.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/free-shipping-progress.json$
npx shadcn@latest add https://sundaeui.dev/r/free-shipping-progress.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/free-shipping-progress.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/free-shipping-progress.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy free-shipping-progress.tsx and free-shipping-progress.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { FreeShippingProgress } from '@/components/sundae/free-shipping-progress'
<FreeShippingProgress />Props
| Prop | Type | Default |
|---|---|---|
subtotal*Cart subtotal in cents. | number | — |
tiers*Thresholds in cents. | { at: number; label: string }[] | — |
currencyISO currency. | string | 'USD' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A progressbar with aria-valuetext of the message; unlocking is announced politely.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-fsp; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Free Shipping Progress free?
- Free Shipping Progress is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Free Shipping Progress?
- Run npx shadcn@latest add https://sundaeui.dev/r/free-shipping-progress.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Free Shipping Progress support keyboard and screen readers?
- A progressbar with aria-valuetext of the message; unlocking is announced politely. Reduced motion removes the movement and keeps every state change.
- Does Free Shipping Progress respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Cart Line Item
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Bundle Builder
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined - Pro
Billing Toggle
Checkout · Refined