asafefe.dev

Pricing Table

New

Plan cards with a monthly and yearly switch. Prices roll to their new value, one plan can be highlighted.

motionlucide-reactutils@soultel/rolling-number@soultel/use-reduced-motion-safe

Hobby

For side projects and trying Acme out.

$0 per month, billed monthly
  • 1 workspace
  • Up to 3 projects
  • Community support
Most popular

Pro

For small teams shipping every week.

$24 per month, billed monthly
  • Unlimited projects
  • Custom domains
  • Priority support
  • Usage analytics

Team

For growing companies with more seats.

$59 per month, billed monthly
  • Everything in Pro
  • SSO and audit log
  • Role based access
  • 99.9% uptime SLA

Installation

$ pnpm dlx shadcn@latest add @soultel/pricing-table

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/pricing-table.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion lucide-react
  2. 2. Copy the source from the Code tab into components/pricing-table.tsx.

Usage

example.tsx17 lines
import { PricingTable } from "@/components/pricing-table"

const plans = [
  { id: "starter", name: "Starter", price: { monthly: 0, yearly: 0 }, features: ["1 project", "Community support"] },
  {
    id: "pro",
    name: "Pro",
    price: { monthly: 24, yearly: 19 },
    features: ["Unlimited projects", "Priority support"],
    highlighted: true,
    badge: "Most popular",
  },
]

export function Pricing() {
  return <PricingTable plans={plans} onSelect={(id, billing) => startCheckout(id, billing)} />
}

Props

PropTypeDefaultDescription
plansPricingPlan[]-id, name, description, price { monthly, yearly }, features, cta, highlighted, badge.
billing / defaultBilling"monthly" | "yearly""monthly"Controlled or initial billing cycle.
onBillingChange(billing) => void-Called when the cycle switches.
onSelect(planId, billing) => void-Called when a plan's button is pressed.
currencystring"$"Symbol shown before the price.
yearlyNotestring"Save 20%"Badge next to the yearly option. Empty string hides it.