A live countdown badge for launches and limited offers, SSR safe with a finished state.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge18New here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { Badge18 } from "@/components/beste/component/badge18";
<Badge18 target="2027-01-01T00:00:00Z" label="Launch in" />
<Badge18
target="2026-12-24T18:00:00Z"
label="Early bird ends in"
finishedText="Offer ended" // shown once the target passes
tone="primary" // "foreground" (default) | "primary"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge18 } from "@/components/beste/component/badge18";
<Badge18
target="2027-01-01T00:00:00Z"
label="Launch in"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
target* | string | — | Target date-time, ISO string (e.g. "2027-01-01T00:00:00Z") |
label | string | — | Muted label before the numbers (e.g. "Launch in") |
finishedText | string | — | Shown once the target has passed |
tone | "foreground" | "primary" | — | Number color |
className | string | — | Additional classes merged onto the root |
A status badge with a pulsing dot for availability, live states, and system health.
A toast style notification badge with an icon tile, title, and description for product updates.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.