Pricing Tiers

Monochrome three-tier pricing with a dark featured card, mono labels, and an enterprise row

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/pricing-tiers.json

Preparing preview…

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/pricing-tiers.json

Usage

code

1"use client"
2
3import { PricingTiers, type PricingTier } from "@/components/ui/pricing-tiers"
4import { CloudArrowDownIcon, LightningIcon, UsersThreeIcon } from "@phosphor-icons/react"
5
6const tiers: PricingTier[] = [
7  {
8    id: "starter",
9    name: "Starter",
10    description: "For side projects and solo builders.",
11    price: { monthly: 19, yearly: 15 },
12    cta: { label: "Start free trial", href: "/signup" },
13    featuresLabel: "Starter includes:",
14    features: [
15      { label: <><b>5</b> projects</>, icon: <LightningIcon weight="fill" /> },
16      { label: <><b>10,000</b> downloads/month</>, icon: <CloudArrowDownIcon weight="fill" /> },
17    ],
18  },
19  {
20    id: "team",
21    name: "Team",
22    description: "For growing teams that ship every week.",
23    price: { monthly: 49, yearly: 39 },
24    featured: true,
25    cta: { label: "Start free trial", href: "/signup?plan=team" },
26    featuresLabel: "Everything in Starter, plus:",
27    features: [{ label: "Shared workspaces", icon: <UsersThreeIcon weight="fill" /> }],
28  },
29]
30
31export function Pricing() {
32  return (
33    <PricingTiers
34      title="Simple, predictable pricing"
35      description={<>Every plan starts with a <b>14-day free trial</b>.</>}
36      tiers={tiers}
37      enterprise={{
38        name: "Enterprise",
39        description: "Custom contracts and dedicated support.",
40        cta: { label: "Contact sales", href: "/contact" },
41        features: [{ label: <><b>Unlimited</b> projects</> }],
42      }}
43      onBillingChange={(billing) => console.log(billing)}
44    />
45  )
46}

Props

Prop Name	Type	Default	Description
tiers	`PricingTier[]`	`DEFAULT_PRICING_TIERS`	Tiers to render as cards. A tier with featured set gets the dark card and the blue call to action.
enterprise	`PricingTiersEnterprise \| null`	`DEFAULT_PRICING_TIERS_ENTERPRISE`	Full-width row under the tiers. Pass null to hide it.
badge	`ReactNode`	`'Pricing'`	Monospaced pill above the title. Pass null to hide it.
title	`ReactNode`	`'Choose a plan that fits your needs'`	Section heading.
description	`ReactNode`	`'All of our plans include a 7-day free trial.'`	Copy under the heading. <b> and <strong> render in the darker ink.
billing	`'monthly' \| 'yearly'`	`-`	Controlled billing cycle.
defaultBilling	`'monthly' \| 'yearly'`	`'yearly'`	Initial billing cycle when uncontrolled.
onBillingChange	`(billing) => void`	`-`	Called when the billing switch changes.
billingLabels	`Record<'monthly' \| 'yearly', ReactNode>`	`{ monthly: 'Monthly', yearly: 'Yearly' }`	Labels for the billing switch.
yearlyDiscountLabel	`ReactNode \| null`	`'-20%'`	Blue chip next to the yearly option. Pass null to hide it.
currency	`string`	`'$'`	Symbol shown before numeric prices.
locale	`string`	`'en-US'`	Locale used to group digits in prices.
periodLabel	`ReactNode`	`'/ Month'`	Suffix shown after numeric prices.
animateIn	`boolean`	`true`	Fades the cards up the first time they scroll into view.
className	`string`	`-`	Additional classes for the section element, merged with cn.

PricingTier

Prop Name	Type	Default	Description
id	`string`	`-`	Stable key for the tier.
name	`ReactNode`	`-`	Tier name in the card header.
description	`ReactNode`	`-`	Short copy under the name.
price	`{ monthly: number; yearly: number } \| string`	`-`	Price per month for each cycle, or a label such as 'Custom'.
featured	`boolean`	`false`	Dark highlighted card with the blue button.
cta	`{ label: ReactNode; href?: string; onClick?: MouseEventHandler }`	`-`	Renders a link when href is set, otherwise a button.
featuresLabel	`ReactNode`	`-`	Monospaced label above the feature list.
features	`{ label: ReactNode; icon?: ReactNode }[]`	`-`	Feature rows. Icons are sized to 22px.

PricingTiersEnterprise

Prop Name	Type	Default	Description
name	`ReactNode`	`-`	Row title.
description	`ReactNode`	`-`	Copy under the title.
cta	`{ label: ReactNode; href?: string; onClick?: MouseEventHandler }`	`-`	Dark button. Sits under the description on wide containers and above the list when stacked.
featuresLabel	`ReactNode`	`-`	Shown above the features only when the row stacks.
features	`{ label: ReactNode; icon?: ReactNode }[]`	`-`	Features in two columns on wide containers.

Loading component…

Components /Pricing Tiers