Pricing Section

Three-tier pricing table with monthly/annual toggle, feature lists, and highlighted popular plan.

Simple, transparent pricing

Start free. Upgrade when you need more.

MonthlyAnnual Save 35%

Free

Everything you need to build great products.

60+ open-source components

Particle animation layer

particleui-cli included

MIT license

Pro blocks

Theme generator

$npx particleui-cli add pricing

TSX

import { PricingSection } from "@/components/blocks/pricing"

export default function Page() {
  return <PricingSection />
}

Prop	Type	Default	Required
heading	string	`"Simple`	no
description	string	`"Start free. Upgrade when you need more."`	no
tiers	PricingTier[]	`defaultTiers`	no

Source filecomponents/blocks/pricing.tsx

Typeblock

Categoriesmarketing, blocks

npm dependencieslucide-react

Registry depsbutton, badge, card, switch, label

Claude skill—