About
Here is Pricing Cards components
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pricing Cards to your project and fits it to your theme.
Code
How Pricing Cards is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
export default function Example() {
return (
<div className="py-20 max-w-5xl mx-auto px-4">
<h1 className="text-center text-3xl font-semibold leading-tight sm:text-4xl md:text-5xl">Pricing</h1>
<p className="text-center text-gray-400 md:text-lg mt-2">Use it for free for yourself, upgrade when your team needs
advanced control.</p>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 mt-10">
{/* Card 1 */}
<div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-gray-50 to-gray-100 p-6">
<div className="flex flex-col items-center border-b border-gray-300 pb-6">
<span className="mb-6 text-gray-800">Free</span>
<span className="mb-3 text-4xl font-medium">$0/mo</span>
<span className="text-gray-500">Best for 1-5 users</span>
</div>
<div className="space-y-4 py-9">
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">One workspace</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Email support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Basic analytics</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Team collaboration</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Priority support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Unlimited file storage </span>
</div>
</div>
</div>
{/* Card 2 */}
<div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-gray-50 to-gray-100 p-6">
<div className="flex flex-col items-center border-b border-gray-300 pb-6">
<span className="mb-6 text-gray-800">Pro</span>
<span className="mb-3 text-4xl font-medium">$79/mo</span>
<span className="text-gray-500">Best for 5-50 users</span>
</div>
<div className="space-y-4 py-9">
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">One workspace</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Email support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Basic analytics</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Team collaboration</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Priority support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-gray-200 text-sm text-gray-600">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</span>
<span className="text-sm text-gray-400">Unlimited file storage </span>
</div>
</div>
</div>
{/* Card 3 */}
<div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-gray-50 to-gray-100 p-6">
<div className="flex flex-col items-center border-b border-gray-300 pb-6">
<span className="mb-6 text-gray-800">Enterprise</span>
<span className="mb-3 text-4xl font-medium">Contact us</span>
<span className="text-gray-500">Best for 50+ users</span>
</div>
<div className="space-y-4 py-9">
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">One workspace</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Email support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Basic analytics</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Team collaboration</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Priority support</span>
</div>
<div className="flex items-center gap-3">
<span className="grid size-5 place-content-center rounded-full bg-indigo-500 text-sm text-white">
<svg stroke="currentColor" fill="none" strokeWidth="2" viewBox="0 0 24 24"
strokeLinecap="round" strokeLinejoin="round" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span className="text-sm text-gray-400">Unlimited file storage </span>
</div>
</div>
</div>
</div>
</div>
);
};More by prebuiltui
View all
Image Gallery
1.3K
Hero Section
412
Feature Sections
344
Testimonial
299
Cards
231
FAQ Sections
177
Form
136
Login Form
125
More in Pricing
View all
Pricing Section
575
Pricing Section
173
Pricing Card
362
Single Pricing Card
792
Glowing Pricing Tiers
39
pricing section
157
Colorful-Pricing
84
Boxly Pricing-1
86
