Pricing

v1.0.0
Marketing

A flexible pricing component with multiple plans, billing toggles, and feature comparisons.

Dependencies

framer-motion
lucide-react
Installation
Add this component to your project

CLI Installation

npx shadcn@latest add https://ui.authmate.xyz/registry/pricing.json

Manual Installation

// Install dependencies
npm install framer-motion lucide-react

// Copy the component code to components/ui/pricing.tsx

// Usage example:
import { Pricing } from "@/components/ui/pricing"

export function MyPricing() {
  return (
    <Pricing 
      defaultCycle="monthly"
      showToggle={true}
    />
  )
}
Props
Component properties and their types
plans
PricingPlan[]
default: defaultPlans

Array of pricing plans to display

defaultCycle
'monthly' | 'yearly'
default: 'monthly'

Default billing cycle

showToggle
boolean
default: true

Whether to show the billing cycle toggle

className
string
default: undefined

Additional CSS classes

Examples
3 different usage examples

Basic Pricing

import { Pricing } from "@/components/ui/pricing"

export function PricingDemo() {
  return <Pricing />
}

Registry

View the component registry file

View Registry
Live Preview
Interactive
3 examples available

Choose Your Plan

Start building beautiful interfaces today. Upgrade or downgrade at any time.

Free
Perfect for getting started
$0

What's included:

  • 5 components
  • Basic documentation
  • Community support
  • MIT license
  • Limited components
  • No priority support
Most Popular
Pro
Best for professional developers
$29/month

What's included:

  • 50+ components
  • Advanced documentation
  • Priority support
  • Commercial license
  • Figma files
  • Custom themes
Enterprise
For large teams and organizations
$99/month

What's included:

  • Unlimited components
  • Custom components
  • 24/7 support
  • Team collaboration
  • Advanced analytics
  • Custom integrations
  • Dedicated account manager