Trial Bar

FreeNew

A slim app bar showing days left in a trial with a progress line and an upgrade action, urgent in the last three days.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

daysLeft1

totalDays14

plan


pnpm dlx shadcn@latest add @tealmac/trial-bar

import { TrialBar } from "@/components/ui/trial-bar"

<TrialBar
  daysLeft={9}
  plan="Team"
  action={<a href="/billing">Choose a plan</a>}
/>

Prop	Type	Default	Description
`daysLeft`	`number`	`-`	Days left; 0 or less means ended.
`totalDays`	`number`	`14`	Length of the trial.
`action`	`ReactNode`	`-`	Upgrade link or button.
`plan`	`string`	`-`	Plan name in the sentence.

Role: status.

role=status text states the days left, so the bar never relies on colour or the progress line.
At zero days it reads that the trial has ended.
Amber urgency uses a dark text colour that keeps 4.5:1 contrast in both themes.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/trial-bar

import { TrialBar } from "@/components/ui/trial-bar"

<TrialBar
  daysLeft={9}
  plan="Team"
  action={<a href="/billing">Choose a plan</a>}
/>

Prop	Type	Default	Description
`daysLeft`	`number`	`-`	Days left; 0 or less means ended.
`totalDays`	`number`	`14`	Length of the trial.
`action`	`ReactNode`	`-`	Upgrade link or button.
`plan`	`string`	`-`	Plan name in the sentence.

Role: status.

role=status text states the days left, so the bar never relies on colour or the progress line.
At zero days it reads that the trial has ended.
Amber urgency uses a dark text colour that keeps 4.5:1 contrast in both themes.