PParable
All components

Pricing Table

Blocks & Slices

A three-tier pricing block whose keyboard-operable monthly/yearly switch spring-tweens every price and lights a save badge computed from the largest annual discount; the popular tier gets an accent border, a softly pulsing glow, and a wide-screen scale-up. Under prefers-reduced-motion prices snap instantly, the knob jumps, and the glow holds a single static frame.

Inspired by Cult Pro — pricing blocks (pattern) — independently built, not affiliated. Attribution policy

MonthlyYearlySave 20%

  • Starter

    billed annually

    • 1 project
    • Community support
    • 1 GB storage
  • Most popular

    Pro

    billed annually

    • Unlimited projects
    • Priority support
    • 100 GB storage
    • Advanced analytics

  • Team

    billed annually

    • Everything in Pro
    • SSO & SAML
    • Audit logs
    • Dedicated manager

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/pricing-table.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/pricing-table.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-3xl px-4">
    <PricingTable
      defaultCycle="yearly"
      onSelect={() => {}}
      tiers={[
        {
          name: "Starter",
          monthly: 0,
          yearly: 0,
          features: ["1 project", "Community support", "1 GB storage"],
          cta: "Start free",
        },
        {
          name: "Pro",
          monthly: 24,
          yearly: 230,
          popular: true,
          features: [
            "Unlimited projects",
            "Priority support",
            "100 GB storage",
            "Advanced analytics",
          ],
        },
        {
          name: "Team",
          monthly: 60,
          yearly: 576,
          features: [
            "Everything in Pro",
            "SSO & SAML",
            "Audit logs",
            "Dedicated manager",
          ],
          cta: "Contact sales",
        },
      ]}
    />
  </div>

Props

PricingTableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">

PropTypeDefaultDescription
tiers*PricingTier[]—The plans to render, left to right.
defaultCycleBillingCycle"monthly"Which cycle is active on first paint.
currencystring"$"Currency symbol prefixed to every price.
accentstring"#8b5cf6"Accent for the popular tier, switch, and check icons. Mirrors `--pb-violet`.
onSelect(name: string) => void—Fires with a tier's `name` when its CTA is pressed.

npm dependencies

  • motion
  • lucide-react