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.jsonManual 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
plansPricingPlan[]
default: defaultPlans
Array of pricing plans to display
defaultCycle'monthly' | 'yearly'
default: 'monthly'
Default billing cycle
showToggleboolean
default: true
Whether to show the billing cycle toggle
classNamestring
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
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