The Pricing block lays out a row of plans and traces the recommended one with a travelling Border Beam, so the tier you want chosen is the one that moves rather than the one wearing another badge.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/pricing.jsonEverything Pricing accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| tiers (required) | PricingTier[] | No default | The plans, in display order |
| heading | string | No default | Section heading above the tiers |
| description | string | No default | Supporting line under the heading |
| PricingTier: name | string | No default | Plan name, e.g. Pro |
| PricingTier: price | string | No default | Headline price, as text so Free and $19 both work |
| PricingTier: period | string | No default | Shown after the price, e.g. /month |
| PricingTier: features | string[] | No default | Ticked list of what the plan includes |
| PricingTier: action | { label: string; href: string } | No default | The plan's call to action |
| PricingTier: featured | boolean | false | Traces the card with a Border Beam and promotes its button. Only the first tier claiming it is honoured |
| className | string | '' | Additional CSS classes for styling |
Required.
Every component is MIT licensed. Pay only when you want the extras.