Pricing Card

A structured card for displaying subscription tiers with features, pricing, and CTAs.

Import

import { PricingCard, DiscountBanner } from "@/components/ui"

Prop	Type	Default	Description
tier	"basic" \| "standard" \| "creator" \| "ultimate"	"basic"	Tier color scheme.
name	string	—	Plan name.
price	string	—	Price display string.
features	PricingFeature[]	—	Array of { label, included } feature items.
highlighted	boolean	false	Adds a prominent border and shadow.
cta	ReactNode	—	Call-to-action button.

For personal projects

$0/month

Popular

For content creators

$19/month

Best value

For teams and businesses

$49/month

Team plan available

Save 20% with annual billingSwitch to yearly and save on all plans.

ANNUAL20