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.
Free
$0
Everything you need to build great products.
60+ open-source components
Particle animation layer
particleui-cli included
MIT license
Pro blocks
Theme generator
Most popular
Pro
$29/mo
Blocks, themes, and tools for ambitious teams.
Everything in Free
30+ Pro blocks
Dashboard templates
Theme generator
Figma design system
Priority support
Enterprise
$99/mo
Custom contracts, SLAs, and dedicated support.
Everything in Pro
Custom themes
Private registry
SSO & access controls
Priority support
Dedicated Slack channel
Installation
1
Run the CLI
$npx particleui-cli add pricing
Usage
TSX
import { PricingSection } from "@/components/blocks/pricing"
export default function Page() {
return <PricingSection />
}Props
| Prop | Type | Default | Required |
|---|---|---|---|
| heading | string | "Simple | no |
| description | string | "Start free. Upgrade when you need more." | no |
| tiers | PricingTier[] | defaultTiers | no |
Details
Source filecomponents/blocks/pricing.tsx
Typeblock
Categoriesmarketing, blocks
npm dependencieslucide-react
Registry depsbutton, badge, card, switch, label
Claude skill—