Library

Two-Tier Pricing

Two-Tier Pricing

Clean side-by-side two-plan layout. One plan can be highlighted with inverted colors (dark card). Hover lift animation and feature checklists.

pricingtwo-tierside-by-sideminimal

Installation

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

How to use

tsx
import { TwoTierPricing } from "@/components/ui/two-tier-pricing";
tsx
<TwoTierPricing
  heading="Simple pricing"
  subheading="Choose the plan that works for you"
  plans={[
    { name: "Starter", price: 15, description: "For individuals", features: ["5 projects", "Email support"] },
    { name: "Pro", price: 49, description: "For growing teams", highlighted: true, features: ["Unlimited projects", "Priority support", "API access"] },
  ]}
/>

Dependencies

framer-motion

Exports

TwoTierPricing

File

components/ui/two-tier-pricing.tsx
Preview

Simple, transparent pricing

No hidden fees. Choose the plan that fits your needs.

S
Starter
$15/month

Perfect for individuals and small projects

  • 5 projects
  • Basic analytics
  • Email support
  • 5GB storage
  • Community access
Most Popular
P
Pro
$49/month

For growing teams and businesses

  • Unlimited projects
  • Advanced analytics
  • Priority support
  • 100GB storage
  • API access
  • Custom domains
Made with