Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn app shell header with a trial bar computed from the trial end date, that hides for paying customers, turns urgent in the last three days and says ended after expiry.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this when a SaaS product gives a time-limited trial and the billing state should be visible without nagging.
Do not use it when the product is free or billed by usage (show a usage meter instead).
It composes trial-bar, which the CLI installs for you.
import { TrialBarAppShell } from "@/components/trial-bar-app-shell"<TrialBarAppShell
trialEndsAt={account.trialEndsAt}
plan="Team"
upgradeHref="/billing"
>
<App />
</TrialBarAppShell>| Prop | Type | Required | Description |
|---|---|---|---|
trialEndsAt | string | null | required | ISO date when the trial ends, or null for a paying customer. |
plan | string | required | - |
upgradeHref | string | required | - |
totalDays | number | optional | Length of the trial in days. Default 14. |
children | React.ReactNode | required | - |
now | () => number | optional | Clock override for tests. |
The pattern ships with a Testing Library test (trial-bar-app-shell.test.tsx) that covers no bar for paying customers, rounding up, days left with the link and the ended state.