Pill badge that rolls between prices glyph by glyph, resizing smoothly as it goes.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/price-badge
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { RollingPriceBadge } from "@/components/nextui/price-badge";23export function PlanPrice() {4return <RollingPriceBadge values={["$9", "$19", "$49"]} interval={2400} />;5}
| Prop | Type | Default | Description |
|---|---|---|---|
| values | string[] | ["$17.38", "$3.15", "$35.99", "Free"] | Values the badge cycles through |
| value | string | – | Show this value instead of cycling, e.g. a live price |
| interval | number | 1800 | Milliseconds each value stays up |
| className | string | – | Extra classes on the wrapper |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.