Pricing Table

Feature comparison table with tiers as columns and features as rows. Checkmarks, X marks, or custom text per cell. Monthly/yearly toggle with animated prices.

pricingtablecomparisonfeatures

Installation

bash

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

How to use

tsx

import { PricingTable } from "@/components/ui/pricing-table";

tsx

<PricingTable
  tiers={[
    { name: "Starter", monthlyPrice: 15, yearlyPrice: 12, description: "For individuals" },
    { name: "Pro", monthlyPrice: 49, yearlyPrice: 39, description: "For teams", popular: true },
    { name: "Enterprise", monthlyPrice: 99, yearlyPrice: 79, description: "For orgs" },
  ]}
  features={[
    { name: "Projects", tiers: ["5", "Unlimited", "Unlimited"] },
    { name: "API access", tiers: [false, true, true] },
    { name: "SSO", tiers: [false, false, true] },
  ]}
/>

Dependencies

framer-motion

Exports

PricingTable

File

components/ui/pricing-table.tsx

Preview

MonthlyYearly Save 20%

	Starter For individuals $15/mo	Popular Pro For growing teams $49/mo	Enterprise For organizations $99/mo
Projects	5	Unlimited	Unlimited
Storage	5GB	100GB	Unlimited
Team members	1	Up to 20	Unlimited
API access
Custom domains
Priority support
SSO / SAML
SLA guarantee