Flexible card components for displaying content, pricing, profiles, products, statistics, blogs, testimonials, and features.
Basic Cards
A basic card with minimal styling and a clean design.
A card enhanced with an icon for better visual hierarchy.
A card with an image header area for visual content.
Simple cards with title, description, and optional actions.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6"> |
| 2 | <h3 "color:#79c0ff">className="text-lg font-semibold text-white">Card Title</h3> |
| 3 | <p "color:#79c0ff">className="mt-2 text-sm text-slate-400">Card description goes here with supporting text.</p> |
| 4 | <button "color:#79c0ff">className="mt-4 rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-700">Action</button> |
| 5 | </div> |
Profile Cards
Senior Frontend Developer
Building beautiful interfaces with React and TypeScript.
Product Designer
Engineering Manager
42
Projects
8.5K
Followers
12
Awards
Cards for displaying user profiles with avatars and social info.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 overflow-hidden"> |
| 2 | <div "color:#79c0ff">className="h-24 bg-gradient-to-r from-violet-600 to-indigo-600" /> |
| 3 | <div "color:#79c0ff">className="px-6 pb-6"> |
| 4 | <div "color:#79c0ff">className="-mt-10 flex h-20 w-20 items-center justify-center rounded-full border-4 border-slate-900 bg-gradient-to-br from-violet-500 to-purple-600 text-2xl font-bold text-white">JD</div> |
| 5 | <h3 "color:#79c0ff">className="mt-3 text-lg font-semibold text-white">Jane Doe</h3> |
| 6 | <p "color:#79c0ff">className="text-sm text-slate-400">Senior Developer</p> |
| 7 | </div> |
| 8 | </div> |
Pricing Cards
$0/month
$29/month
$99/month
Pricing tier cards with features and CTAs.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-violet-500 bg-slate-900 p-6 shadow-lg shadow-violet-500/10"> |
| 2 | <span "color:#79c0ff">className="rounded-full bg-violet-600 px-3 py-0.5 text-xs font-medium text-white">Most Popular</span> |
| 3 | <h3 "color:#79c0ff">className="mt-3 text-xl font-semibold text-white">Pro</h3> |
| 4 | <p "color:#79c0ff">className="mt-2"><span "color:#79c0ff">className="text-3xl font-bold text-white">$29</span><span "color:#79c0ff">className="text-slate-400">/month</span></p> |
| 5 | <ul "color:#79c0ff">className="mt-4 space-y-2">...</ul> |
| 6 | <button "color:#79c0ff">className="mt-6 w-full rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white">Start Free Trial</button> |
| 7 | </div> |
Product Cards
Electronics
Fashion
Home
E-commerce product cards with images, prices, and actions.
| 1 | <div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900"> |
| 2 | <div "color:#79c0ff">className="relative h-48 bg-gradient-to-br from-violet-500/20 to-indigo-500/20"> |
| 3 | <span "color:#79c0ff">className="absolute top-3 left-3 rounded-full bg-emerald-500 px-2 py-0.5 text-xs font-bold text-white">New</span> |
| 4 | </div> |
| 5 | <div "color:#79c0ff">className="p-5"> |
| 6 | <h3 "color:#79c0ff">className="font-semibold text-white">Product Name</h3> |
| 7 | <p "color:#79c0ff">className="mt-1 text-sm text-slate-400">Brief description</p> |
| 8 | <div "color:#79c0ff">className="mt-3 flex items-center justify-between"> |
| 9 | <span "color:#79c0ff">className="text-lg font-bold text-white">$49.99</span> |
| 10 | <button "color:#79c0ff">className="rounded-lg bg-violet-600 px-4 py-2 text-sm text-white">Add to Cart</button> |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
Stats Cards
12,345
Total Users
$45.2K
Revenue
24.5%
Bounce Rate
4m 32s
Avg. Session
Dashboard-style statistic cards with trends and indicators.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-5"> |
| 2 | <div "color:#79c0ff">className="flex items-center justify-between"> |
| 3 | <p "color:#79c0ff">className="text-sm text-slate-400">Total Users</p> |
| 4 | <span "color:#79c0ff">className="text-xs font-medium text-emerald-400">+12%</span> |
| 5 | </div> |
| 6 | <p "color:#79c0ff">className="mt-2 text-3xl font-bold text-white">12,345</p> |
| 7 | </div> |
Blog Post Cards
Explore the latest features in Next.js 15 including server components, streaming, and the new app router.
Jane Doe
Jan 15, 2025
Learn how to build scalable design systems that work across platforms and teams.
Alex Smith
Feb 2, 2025
A deep dive into creating smooth, performant animations with Tailwind CSS utility classes.
Maria R.
Cards for displaying blog articles with metadata.
| 1 | <div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-slate-800 bg-slate-900"> |
| 2 | <div "color:#79c0ff">className="h-48 bg-gradient-to-br from-violet-500/20 to-indigo-500/20" /> |
| 3 | <div "color:#79c0ff">className="p-5"> |
| 4 | <span "color:#79c0ff">className="text-xs font-medium text-violet-400">Technology</span> |
| 5 | <h3 "color:#79c0ff">className="mt-2 text-lg font-semibold text-white">Article Title</h3> |
| 6 | <p "color:#79c0ff">className="mt-2 text-sm text-slate-400">Brief excerpt...</p> |
| 7 | <div "color:#79c0ff">className="mt-4 flex items-center gap-3"> |
| 8 | <div "color:#79c0ff">className="h-8 w-8 rounded-full bg-violet-500" /> |
| 9 | <div><p "color:#79c0ff">className="text-sm text-white">Author</p><p "color:#79c0ff">className="text-xs text-slate-400">Jan 15, 2025</p></div> |
| 10 | </div> |
| 11 | </div> |
| 12 | </div> |
Testimonial Cards
“These components are incredible. We built our entire SaaS dashboard in half the time. The code quality is exceptional.”
Sarah Miller
CTO, StartupX
“The best component library I have ever used. Beautiful defaults and incredibly customizable.”
David Kim
Lead Developer, Agency
“Saved our team hundreds of hours. The attention to detail in every component is remarkable.”
Lisa Park
Product Manager, Corp
Customer reviews and testimonials with ratings.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6"> |
| 2 | <div "color:#79c0ff">className="flex gap-1 text-amber-400">★★★★★</div> |
| 3 | <p "color:#79c0ff">className="mt-3 text-sm text-slate-300">"Amazing components, saved us weeks of development time."</p> |
| 4 | <div "color:#79c0ff">className="mt-4 flex items-center gap-3"> |
| 5 | <div "color:#79c0ff">className="h-10 w-10 rounded-full bg-violet-500 text-white text-sm font-bold flex items-center justify-center">JD</div> |
| 6 | <div><p "color:#79c0ff">className="text-sm font-medium text-white">Jane Doe</p><p "color:#79c0ff">className="text-xs text-slate-400">CEO, TechCorp</p></div> |
| 7 | </div> |
| 8 | </div> |
Feature Cards
Optimized for performance with lazy loading and code splitting.
Every component adapts beautifully to any screen size.
Built with ARIA patterns and keyboard navigation support.
Easily customize with Tailwind CSS utility classes.
Highlight product features with icons and descriptions.
| 1 | <div "color:#79c0ff">className="rounded-2xl border border-slate-800 bg-slate-900 p-6"> |
| 2 | <div "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-600"> |
| 3 | <svg "color:#79c0ff">className="h-6 w-6 text-white" .../> |
| 4 | </div> |
| 5 | <h3 "color:#79c0ff">className="mt-4 text-lg font-semibold text-white">Feature Title</h3> |
| 6 | <p "color:#79c0ff">className="mt-2 text-sm text-slate-400">Feature description here.</p> |
| 7 | </div> |