Library

Pricing Cards

Pricing Cards

Three-tier pricing layout with animated monthly/yearly toggle, feature checklists, popular badge, and hover lift. Prices animate on toggle.

pricingcardstoggletiers

Installation

bash
# Copy pricing-cards.tsx to your project
cp components/ui/pricing-cards.tsx your-project/components/ui/pricing-cards.tsx

How to use

tsx
import { PricingCards } from "@/components/ui/pricing-cards";
tsx
<PricingCards
  tiers={[
    { name: "Starter", monthlyPrice: 9, yearlyPrice: 7, description: "For individuals",
      features: [{text: "5 projects", included: true}, {text: "API access", included: false}] },
    { name: "Pro", monthlyPrice: 29, yearlyPrice: 23, description: "For teams", popular: true,
      features: [{text: "Unlimited projects", included: true}, {text: "API access", included: true}] },
    { name: "Enterprise", monthlyPrice: 99, yearlyPrice: 79, description: "For large orgs",
      features: [{text: "Everything in Pro", included: true}, {text: "SSO", included: true}] },
  ]}
/>

Dependencies

framer-motion

Exports

PricingCards

File

components/ui/pricing-cards.tsx
Preview
MonthlyYearlySave 20%

Starter

Perfect for side projects

$9/mo
  • 5 projects
  • 10GB storage
  • Email support
  • API access
  • Custom domains
Most Popular

Pro

For growing teams

$29/mo
  • Unlimited projects
  • 100GB storage
  • Priority support
  • API access
  • Custom domains

Enterprise

For large organizations

$99/mo
  • Everything in Pro
  • Unlimited storage
  • 24/7 phone support
  • SSO & SAML
  • SLA guarantee
Made with