Card Components for React & Next.js
Find 422 versatile React card components built with Tailwind CSS, perfect for showcasing content elegantly in any Next.js application.
Browse components
Course Design Cards
1.1K
Interactive Tech Stack Bento Grid with Hover Effects
215
Stats cards with links
83
Statistics Card 2
276
Statistics Card 7
301
Card Studio
10
Weather Card
59
Statistics Card 10
272
The Item one
3
Leaderboard Card
651
Streak Badge
294
Card
18
System Status Block
316
Dashboard with Collapsible Sidebar
2.5K
Testimonial
15
Bento
1.2K
Empty
16
Feature Sections
40
testimonial
833
Gradient Tiers
82
Glassmorphism Profile Card
461
Cards
39
Stats
40
Checkbox
12
Card
56
Pricing Card
372
Stats Section with Text
476
Feature Section with Bento Grid
408
Event RSVP Card
45
Dashboard Stats Skeleton
13
Shine Border
969
Switch List Card
34
Features 8
3.1K
Login Card
16
Cookies
6
File Card Collections
1.1K
Contact Card
1K
File Upload
49
Funnel Chart Big
137
Tabbed Feature Categories
67
Focus Frame Border
68
Bold Stats
274
Ruixen Bento Cards
451
Item
10
Progress Metric Card
944
Modern Payment Form
348
Card with Cross Patter
37
Bar Chart
12
Keep browsing with a free account
See all 12,000+ components, 350 templates, 954 themes and 138 apps, save favourites and copy two prompts a day for free. No card needed
More card components
- Stats cards with links by Ephraim Duncan
- Card Studio by Clevision
- Testimonial by prebuiltui
- Empty by Cnippet
- Stats by Méschac Irung
- Feature Sections by prebuiltui
- The Item one by felipemenezes098
- Stats cards with links by Ephraim Duncan
- Card Studio by Clevision
- Card by Sean Hello
- Testimonial by prebuiltui
- Empty by Cnippet
- Stats by Méschac Irung
- Feature Sections by prebuiltui
- The Item one by felipemenezes098
- Cards by prebuiltui
- Features Grid by gooseui
- Card by Ravi Katiyar
- Login Card by Arihant jain
- Card with Grid Ellipsis Pattern by Indie UI
- Checkout Form by Ruixen
- Integrations Card Grid by Méschac Irung
- Cards by LaviKatiyar
- QR Code by Abraham
- Card Studio by Clevision
- Stats cards with links by Ephraim Duncan
- Testimonial by prebuiltui
- Empty by Cnippet
- Feature Sections by prebuiltui
- Stats by Méschac Irung
- Cookies by prebuiltui
- Login Card by Arihant jain
- Skeleton Loader by animbits
- AI Diff by Edu Calvo
- The Item one by felipemenezes098
- Accordion by Clevision
- Bento Feature Grid by LN
- Pricing Card by felipemenezes098
- Recent Activity Card by Oliver
- Pricing Card With Features by Erik Erik
- Blog 7 by Shadcnblocks.com
- Skeleton by shadcn
- Profile Dropdown by Arihant jain
- Achievement badge by trophyso
- QR Code by Abraham
- Approval Card by Syed Hasnain
- Border Beam by appica-dev
- Blog Section by Tommy Jepsen
- Card Studio by Clevision
- Testimonial by prebuiltui
- Stats cards with links by Ephraim Duncan
- Empty by Cnippet
- Feature Sections by prebuiltui
- Cards by prebuiltui
- Login Card by Arihant jain
- The Item one by felipemenezes098
- Nav List Card by Arihant jain
- Wallet Card 2 by Berat Berkay Gökdemir
- Services Card by Ravi Katiyar
- ThreeD Wall Calendar by Ruixen
- Empty by shadcn
- Event Calendar by Ruixen
- Glass Card by Smit Prajapati
- Feature Modern by brijr
- Weather Widget by Fahad Yaseen
- Gradient Card by Ravi Katiyar
- Card by Wensity Labs
- Stats Card by Kavi Katiyar
- Card Tabs by uiable
- Notched Project Card by Maud Benaddi
- Accordion by Clevision
- Bar Chart by Intent UI
- Card Studio by Clevision
- Testimonial by prebuiltui
- Feature Sections by prebuiltui
- Empty by Cnippet
- Login Card by Arihant jain
- Cookies by prebuiltui
- The Item one by felipemenezes098
- Skeleton by Preet Suthar
- Tilt Card by tom
- Leaderboard Podium by trophyso
- File Upload by Ephraim Duncan
- Gradient Bold Card by Ruixen
- BeUI Tilt Card by Saurabh
- Glassmorphism Folder Cards by Kedhareswer Naidu
- 3D Card by Kavi Katiyar
- Border Beam by appica-dev
- Health Stat Card by ruhith
- Achievement badge by trophyso
- Pie Chart by Intent UI
- Dashboard Activities by Sonu kumar
- Liquid Glass Card by Ali Imam
- Login Form Card by felipemenezes098
- Feature Problem Cards by Mohammad Shehadeh
- Article Skeleton by felipemenezes098
- Testimonial by prebuiltui
- Card Studio by Clevision
- Cookies by prebuiltui
- Pricing Cards by prebuiltui
- Login Card by Arihant jain
- The Item one by felipemenezes098
- Card by extend-hq
- Border Beam by appica-dev
- Pricing Plan Card by Cnippet
- Notification Stack Card by ShadcnSpace
- Login Card by Ruixen
- Team Lanyard Rail – Meet the Team Section with Flip Badges by DHxWhy
- Sign In Card by Ruixen
- Bar Chart by Intent UI
- How It Works by chamaac
- Animate Card Animation by Jessi
- 3D tilt card by Awanish Verma
- Achievement badge by trophyso
- Change Password Form by Cnippet
- Audio Upload Card by Isaiah
- Service Card by LaviKatiyar
- Pricing Card Skeleton by felipemenezes098
- Radio Group by Origin UI
- PricnigCards03 by Ruixen
- Testimonial by prebuiltui
- Card Studio by Clevision
- Pricing Cards by prebuiltui
- Login Card by Arihant jain
- The Item one by felipemenezes098
- Achievement badge by trophyso
- Draggable Widget Grid by carolina
- Animated 3D Card by Shailendra Kumar
- Card by Ravi Katiyar
- Animated Countdown by nexus-ui
- Card by Ravi Katiyar
- Tooltip by Origin UI
- Item by shadcn
- Folded Card by cult/ui
- Bar Chart by Intent UI
- Card Table by felipemenezes098
- Card by shadcn
- Feature Modern by brijr
- Radio Group by Abraham
- Stats Card by Kavi Katiyar
- Payment Method Card Checkbox by Cnippet
- Information Card by KarrixLee
- Incident Status Timeline by Cnippet
- Progress by Sean Hello
- Testimonial by prebuiltui
- Card Studio by Clevision
- Pricing Cards by prebuiltui
- Login Card by Arihant jain
- The Item one by felipemenezes098
- Achievement badge by trophyso
- Tooltip by Origin UI
- Tracker Card by Kavi Katiyar
About card components
This is a large collection of 834 card components for React, the container pattern for grouping related content. You'll find product cards, pricing cards, profile and testimonial cards, stat tiles, and media cards with images or video. Styles range from flat and bordered to elevated with shadows, plus hover and 3D-tilt variants. Whether you need a react card for a grid of items or a single feature callout, there's a layout here for it.
Match the container to its content: use a media card for image-led items and a compact one for dense dashboards. Keep spacing consistent across a grid so everything lines up. Copy a card's TSX, run the shadcn CLI with its registry URL, or pull it through the Magic MCP in Cursor or Claude Code. They follow shadcn/ui conventions, use Tailwind, and drop into any Next.js project.