Pricing Block

A responsive multi-plan block built from the same reusable single-plan card.

Solo

$9/ month

For one person shipping focused products.

  • All components
  • Commercial use
  • Updates
Choose Solo
Popular

Studio

$24/ month

For small teams building across products.

  • Everything in Solo
  • Five seats
  • Priority support
Choose Studio

Install

Add the source directly to your shadcn project.

pnpm dlx shadcn@latest add https://ui.starck.studio/r/pricing-block.json

Usage

<PricingBlock plans={[
  {
    "name": "Solo",
    "price": "$9",
    "interval": "month",
    "description": "For one person shipping focused products.",
    "features": [
      "All components",
      "Commercial use",
      "Updates"
    ],
    "ctaLabel": "Choose Solo",
    "ctaHref": "#solo"
  },
  {
    "name": "Studio",
    "price": "$24",
    "interval": "month",
    "description": "For small teams building across products.",
    "features": [
      "Everything in Solo",
      "Five seats",
      "Priority support"
    ],
    "ctaLabel": "Choose Studio",
    "ctaHref": "#studio",
    "badge": "Popular",
    "highlighted": true
  }
]} />