Getting Started
Templates
Blocks
Components
Three side-by-side pricing cards. The featured card is distinguished by a dashed fading perimeter and a gradient CTA. Each card stacks a header → description → price → CTA → main benefits → plus-divider → premium benefits, and Pro/Team plans use blue check chips for their premium features.
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/pricing-tier-cardsA single grid grid-cols-1 md:grid-cols-3 gap-6 holds the three cards. The featured card carries md:-mt-4 md:-mb-4 md:py-12 so it visually extends above and below its grid cell on desktop, plus and to lift it above the side cards. On mobile the grid collapses to one column and the negative margins do nothing — cards stack cleanly.
shadow-2xl ring-1 ring-foreground/10z-10The card body is a flex column:
BadgeCheck for the featured tier, Sparkles for the third).text-5xl with / month next to it.<ul> with a flex-1 so it pushes the CTA to the bottom of the card. Each benefit is a Check chip + label + optional description; inherited rows (e.g. "Everything in Free") swap to a CirclePlus chip.Button with variant="default" on the featured card, variant="secondary" on the others.All copy lives in the PLANS array at the top of the file. Each plan accepts:
name, subtitle, price (string for the big number, e.g. "$19"), perMonth (toggles the / month suffix).annualWas + annualNow — render the strikethrough + discounted annual total. Omit both on the free plan.badge — "check" or "sparkles" for the top-right icon. Omit on plans without a badge.featured — toggles the elevated styling on the middle card.benefits — array of { label, description?, inherited? }. Set inherited: true for the "Everything in X" lines so they render with the CirclePlus chip instead of a green check.cta, href — the action button.const PLANS = [
{
id: "free",
name: "Ruixen",
subtitle: "Free, forever.",
price: "$0",
perMonth: true,
benefits: [
{ label: "Core OSS components", description: "Hero blocks, CTAs, ..." },
// ...
],
cta: "View on GitHub",
href: "https://github.com/ruixenui",
},
// featured: true on the middle card
// badge: "sparkles" on the third card
]lucide-react — BadgeCheck, Check, CirclePlus, Sparkles.button primitive.