Pricing Card

cards

Tiered subscription card with feature checklists and high-converting CTA.

#card#pricing#subscription#cta

Live Interactive Preview

Popular

Pro Developer

$29/ month

Unlimited copy-paste components and design tokens.

All 25+ Components
Full TypeScript & TSX Code
Tailwind CSS v4 Ready
Free Lifetime Updates

Component Source Code

Select language in the dropdown

PricingCard.tsx

1'use client';
2
3import React from 'react';
4import { Check, Zap } from 'lucide-react';
5
6export default function PricingCard() {
7  return (
8    <div className="w-full max-w-xs sm:max-w-sm rounded-2xl sm:rounded-3xl border-2 border-blue-500/80 bg-white dark:bg-slate-900 p-6 shadow-xl relative transition-colors">
9      <div className="absolute -top-3 right-6 rounded-full bg-blue-600 px-3 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white shadow-xs">
10        Popular
11      </div>
12      <div className="flex items-center gap-2 mb-2">
13        <Zap className="h-4 w-4 text-blue-600 dark:text-blue-400" />
14        <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">Pro Developer</h3>
15      </div>
16      <div className="flex items-baseline gap-1 my-3">
17        <span className="text-3xl font-extrabold text-slate-900 dark:text-slate-100">$29</span>
18        <span className="text-xs text-slate-500 dark:text-slate-400">/ month</span>
19      </div>
20      <p className="text-xs text-slate-500 dark:text-slate-400 mb-4">Unlimited copy-paste components and design tokens.</p>
21      <ul className="space-y-2 text-xs text-slate-600 dark:text-slate-300 mb-6">
22        {['All 25+ Components', 'Full TypeScript & TSX Code', 'Tailwind CSS v4 Ready', 'Free Lifetime Updates'].map((t) => (
23          <li key={t} className="flex items-center gap-2">
24            <Check className="h-3.5 w-3.5 text-blue-600 dark:text-blue-400 shrink-0" />
25            <span>{t}</span>
26          </li>
27        ))}
28      </ul>
29      <button className="w-full rounded-xl bg-blue-600 hover:bg-blue-700 active:scale-98 py-2.5 text-xs font-semibold text-white shadow-md transition">
30        Get Pro Access
31      </button>
32    </div>
33  );
34}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/PricingCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import PricingCard from '@/components/cards/PricingCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <PricingCard />
7    </main>
8  );
9}