Pricing Card
Pricing plan card with title, price, period, features list, and CTA button. Includes popular or featured variant with highlight.
Starter
For individuals getting started
- Up to 5 projects
- Basic analytics
- Email support
Pro
For growing teams
- Unlimited projects
- Advanced analytics
- Priority support
- Custom integrations
Enterprise
For large organizations
- Everything in Pro
- Dedicated account manager
- SLA guarantee
- Custom contracts
- On-premise option
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-mergeRelated Cards Components
Ambient Glow Card
A feature card with a rotating ambient aura for premium highlights.
Animated Card Hover
Hover tilt card with optional glare and depth effect.
Animated Gradient Border Card
Card with a rotating gradient border for premium emphasis.
Bento Card
Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.
Bento Grid
Asymmetric bento layout tiles with ambient glow and shine animations.
Card
Flexible card container with header, content, and footer sections.