Pricing Cards
Elegant pricing section with animated particles, geometric lines, and monthly/yearly toggle
Plans & Pricing
Choose the plan that matches your workflow and scale with ease.
Starter
For individuals just getting started
$12Billed $144 annually
- 1 project
- Basic analytics
- Email support
- 500MB storage
Growth
For teams building serious products
$39Billed $468 annually
Everything in Starter, and:
- Unlimited projects
- Team collaboration tools
- Priority chat support
- Advanced analytics
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/pricing-cardsThis will automatically add the component to your project.
Copy and paste the following code into your project:
Make sure you have the required animations in your tailwind.config.js:
// No additional configuration needed// Animations are included inline in the componentAdd the required classes to your global stylesheet:
/* Animations are dynamically generated within the component */Dependencies
npm install lucide-react @radix-ui/react-switchFeatures
- Animated Particles: Subtle particle animation that creates visual interest
- Geometric Lines: Animated accent lines that draw attention
- Price Toggle: Switch between monthly and yearly pricing
- Responsive Design: Adapts beautifully to all screen sizes
- Dark Theme: Modern dark color scheme with backdrop blur
- Performance Optimized: Lightweight canvas-based animations
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | undefined | Section heading text (default: "Plans & Pricing") |
| description | string | undefined | Section description text |
| plans | PricingPlan[] | undefined | Array of pricing plans with features and pricing details |
Variation
Plans and Pricing
Receive unlimited credits when you pay yearly, and save on your plan
Free
For your hobby
Pro
For small business
Enterprise
For multiple teams
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/pricing-cards-1This will automatically add the component to your project.
Copy and paste the following code into your project:
Make sure you have the required animations in your tailwind.config.js:
// No additional configuration needed// Animations are included inline in the componentAdd the required classes to your global stylesheet:
/* Animations are dynamically generated within the component */Types
interface PricingFeature {
text: string;
}
interface PricingPlan {
id: string;
name: string;
description: string;
monthlyPrice: string;
yearlyPrice: string;
features: PricingFeature[];
button: {
text: string;
url: string;
};
}