Blocks / Commerce

Pricing

Plan comparison and upgrade page with a monthly/yearly toggle, backed by the framework's checkout service and the product's registered plan catalogue.

$pnpm exec shadcn add @intelligo/pricing

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

Plan comparison and upgrade page with a monthly/yearly toggle, backed by the framework's checkout service and the product's registered plan catalogue. Ships the lib/billing.ts product binding and actions/billing.ts checkout actions that the checkout and billing-settings items also depend on — install this item first. Other ways to buy a plan render under its checkout button from the lib/plan-card-config.tsx seam, empty by default (the payment-poll item's LocalPaymentButton binds there).

yours to edit
  • lib/billing-config.ts
  • lib/plan-card-config.tsx

messages/en/pricing.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

built from

alert, badge, button, card, skeleton, animated-list

npm packages it adds

@intelligo-dev/core · @intelligo-dev/auth · @intelligo-dev/billing · @intelligo-dev/next · zod@^4.6.5 · lucide-react · server-only · next-intl

what shadcn add writes · 15 files
Routes
  • app/[locale]/(app)/pricing/page.tsx
  • app/[locale]/(app)/pricing/loading.tsx
  • app/[locale]/(app)/pricing/error.tsx
Components
  • components/billing/pricing-content.tsx
  • components/billing/plan-card.tsx
  • components/billing/interval-toggle.tsx
  • components/billing/checkout-button.tsx
Actions, config and messages
  • actions/billing.ts
  • lib/billing.ts
  • lib/billing-config.ts
  • lib/format-money.ts
  • lib/plan-copy.ts
  • lib/plan-card-config.tsx
  • messages/en/pricing.json
  • messages/en/plans.json

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started