Back to Components
Cards
Pricing Card
Pricing plan card with title, price, period, features list, and CTA button. Includes popular/featured variant with highlight.
Starter
$9/month
- 5 projects
- Basic analytics
- Email support
Popular
Pro
$29/month
- Unlimited projects
- Advanced analytics
- Priority support
- Custom integrations
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/pricing-card.tsx
Installation
Using shadcn CLI
npx shadcn add pricing-card --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge