Trial Countdown
A trial status card: a segmented bar of days used, what you keep and lose, and a CTA that firms up near the end.
trial-countdown.tsxtrial-countdown.css
Checking access…
Overview
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.
When to use
- App sidebars, settings, billing pages during a trial.
When not to use
- Modal interruptions: keep trial nudges non-blocking.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/trial-countdown.json$
npx shadcn@latest add https://sundaeui.dev/r/trial-countdown.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/trial-countdown.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/trial-countdown.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 trial-countdown.tsx and trial-countdown.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 { TrialCountdown } from '@/components/sundae/trial-countdown'
<TrialCountdown />Props
| Prop | Type | Default |
|---|---|---|
totalDaysTrial length. | number | 14 |
daysLeft*Days remaining. | number | — |
onUpgradeCTA handler. | () => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
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.
Customization
- Colours are CSS custom properties on .sd-trl; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Trial Countdown free?
- Trial Countdown is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Trial Countdown?
- Run npx shadcn@latest add https://sundaeui.dev/r/trial-countdown.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Trial Countdown support keyboard and screen readers?
- 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.
- Does Trial Countdown respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Billing Toggle
Checkout · Refined - Pro
Seat Pricing
Checkout · Refined - Pro
Payment Methods
Checkout · Refined - Pro
Plan Comparison
Checkout · Refined - Pro
Pause Subscription
Checkout · Refined - Pro
Cancel Flow
Checkout · Refined