[21st home](/content/site-root.html) SearchClear [Components](/content/community/components/index.html) [Themes](/content/community/themes/index.html) [Templates](/content/community/templates/index.html) Category All Marketing Blocks UI Components Time All time Last week Last month Last 3 months Last year Primitive library All Radix UI Base UI React Aria Ariakit Headless UI Other primitives Tailwind version All Tailwind v4 Tailwind v3 License No options Library No options Built with No options Author No authors yet Tags (20) Clear 3d-card 0 analysis-card 0 animated-3d-card 0 animated-card 0 asset-card 0 audiobook-card 0 card 1.8K card-accent 0 card-info 0 credit-card 0 debit-card 0 glowing-effect-card 0 hover-card 0 info-card 0 project-card 0 promo-card 0 reward-card 0 service-card 0 statistics-card 0 tilted-card 0 Marketing Blocks Announcements 71 Backgrounds 365 Borders 111 Calls to Action 501 Clients 17 Comparisons 31 Docks 49 FAQs 191 Features 318 Footers 65 Galleries 272 Heroes 1.2K Hooks 51 Images 428 Maps 51 Marquees 113 Navigation Menus 477 Pricing Sections 216 Scroll Areas 293 Shaders 404 Stats & KPIs 153 Steppers 124 Team Sections 119 Testimonials 161 Texts 663 Timelines 74 Videos 162 UI Components Accordions 234 AI Chats 248 Alerts 240 Avatars 597 Badges 605 Buttons 2K Calendars 239 Carousels 239 Charts & Data Viz 246 Checkboxes 238 Cursors 152 Dashboards 400 Date Pickers 250 Dialogs / Modals 328 Dropdowns 506 Empty States 77 File Trees 61 File Uploads 154 Forms 1.5K Globes 41 Grids & Bento 620 Icons 851 Inputs 949 Links 354 Lists 349 Menus 287 Notifications 247 Numbers 54 Onboarding 53 Paginations 130 Popovers 179 Profiles 270 Progress 375 Radio Groups 152 Search Bars 218 Selects 316 Sidebars 95 Sign Ins 103 Sign ups 58 Sliders 217 Spinner Loaders 480 Tables 313 Tabs 239 Tags 74 Text Areas 187 Toasts 79 Toggles 532 Tooltips 267 Components/card Search `K` [Pricing](/content/pricing/index.html) Sign in - **Course Design Cards** \\ by kristen17](/content/@kristen17/components/course-design-cards/index.html) - **Statistics Card 5** \\ by Sean Hello](/content/@sean0205/components/statistics-card-5/index.html) - **Statistics Card 13** \\ by Sean Hello](/content/@sean0205/components/statistics-card-13/index.html) - **Card** \\ by shadcn](/content/@shadcn/components/card/index.html) - **Glowing Background Stars Card** \\ by Manu Arora](/content/@manuarora700/components/glowing-background-stars-card/index.html) - **Statistics Card 10** \\ by Sean Hello](/content/@sean0205/components/statistics-card-10/index.html) - **Avatar Hover Card** \\ by Moumen Soliman](/content/@moumensoliman/components/avatar-hover-card/index.html) - **Fraud Card** \\ by Aman Shakya](/content/@amanshakya1808/components/fraud-card/index.html) - **Card with Noise Patter** \\ by Indie UI](/content/@Ali-Hussein-dev/components/card-with-noise-patter/index.html) - **ScreenTimeCard** \\ by Ankit Verma](/content/@itsankitverma/components/screen-time-card/index.html) - **Credit Card** \\ by Ankit Verma](/content/@itsankitverma/components/credit-card-1/index.html) - **3d Sliding Cards** \\ by Abhinav C](/content/@abhinavcdev/components/3d-sliding-cards/index.html) - **Profile Card** \\ by Arunachalam](/content/@arunachalam/components/profile-card/index.html) - **Glass Card** \\ by Rushil Dhinoja](/content/@molecule-lab-rushil/components/glass-card/index.html) - **Modern Login & Signup** \\ by Muhammad Asif](/content/@pulseawan/components/modern-login-signup/index.html) - **FAQ roller** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/habit-faq-scroller/index.html) - **Dashboard with Collapsible Sidebar** \\ by Sonu kumar](/content/@uniquesonu/components/dashboard-with-collapsible-sidebar/index.html) - **Progress Metric Card** \\ by Mak VieSAinte](/content/@makviesainte/components/progress-metric-card/index.html) - **Glassmorphism Trust Hero** \\ by Hossain Jahed](/content/@easemize/components/glassmorphism-trust-hero/index.html) - **Integrations Card Grid** \\ by Méschac Irung](/content/@meschacirung/components/integrations-three/index.html) - **Contact Card** \\ by Shaban Haider](/content/@sshahaider/components/contact-card/index.html) - **Empty** \\ by shadcn](/content/@shadcn/components/empty/index.html) - **Membership Card** \\ by Berat Berkay Gökdemir](/content/@beratberkayg/components/membership-card/index.html) - **Fancy Card** \\ by Maxim Bortnikov](/content/@maxim.bort.devel/components/fancy-card/index.html) - **Statistics Card 15** \\ by Sean Hello](/content/@sean0205/components/statistics-card-15/index.html) - **Card** \\ by Sean Hello](/content/@sean0205/components/card/index.html) - **Statistics Card 1** \\ by Sean Hello](/content/@sean0205/components/statistics-card-1/index.html) - **Market Snapshot** \\ by Savva Sicevs](/content/@ssicevs/components/market-snapshot/index.html) - **Gradient Card** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/gradient-card/index.html) - **Login & Signup** \\ by Ephraim Duncan](/content/@ephraimduncan/components/login-signup/login-with-magic-link/index.html) - **Features 8** \\ by Méschac Irung](/content/@meschacirung/components/features-8/index.html) - **Blog Section** \\ by Shaban Haider](/content/@sshahaider/components/blog-section/index.html) - **3D Card** \\ by Kavi Katiyar](/content/@kavikatiyar/components/3d-card/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/customer-review-cards/index.html) - **Animated Glow Card** \\ by Hossain Jahed](/content/@easemize/components/animated-glow-card/index.html) - **Area Chart** \\ by REAVIZ](/content/@reaviz/components/area-chart-1/index.html) - **BeUI Tilt Card** \\ by Saurabh](/content/@saurabh10102/components/be-ui-tilt-card/index.html) - **Feature Service Section** \\ by ui layout](/content/@uilayout.contact/components/feature-service/index.html) - **Stats cards with links** \\ by Ephraim Duncan](/content/@ephraimduncan/components/stats-cards-with-links/stats-card-with-area-chart/index.html) - **Services Card** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/services-card/index.html) - **Cards** \\ by prebuiltui](/content/@prebuiltui/components/cards/on-hover-tilt-effect-card/index.html) - **Coverflow Carousel** \\ by Ruixen](/content/@ruixen.ui/components/coverflow-carousel/index.html) - **Pricing for Teams** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/pricing-for-teams/index.html) - **Stats 2** \\ by Ali Imam](/content/@designali-in/components/stats-2/index.html) - **JobCard** \\ by Ruixen](/content/@ruixen.ui/components/job-card/index.html) - **Bento** \\ by KinfeMichael Tariku](/content/@kinfe123/components/bento/index.html) - **Cards** \\ by LaviKatiyar](/content/@lavikatiyar/components/cards/index.html) - **BentoItem** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/bento-item/index.html) - **Area Charts 1** \\ by Sean Hello](/content/@sean0205/components/area-charts-1/index.html) - **Line Charts 6** \\ by Sean Hello](/content/@sean0205/components/line-charts-6/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/customer-testimonials/index.html) - **Stats cards with links** \\ by Ephraim Duncan](/content/@ephraimduncan/components/stats-cards-with-links/stats-cards-with-circular-progress/index.html) - **Statistics Card 8** \\ by Sean Hello](/content/@sean0205/components/statistics-card-8/index.html) - **Testimonials** \\ by Méschac Irung](/content/@meschacirung/components/testimonials/testimonials-one/index.html) - **Gradient Bold Card** \\ by Ruixen](/content/@ruixen.ui/components/gradient-bold-card/index.html) - **Neon Gradient Card** \\ by Dillion Verma](/content/@dillionverma/components/neon-gradient-card/index.html) - **Login & Signup** \\ by Ephraim Duncan](/content/@ephraimduncan/components/login-signup/simple-card-signup-form/index.html) - **Gradient Card Showcase** \\ by Le Thanh](/content/@minhxthanh/components/gradient-card-showcase/index.html) - **Animated Card Chart** \\ by badtz](/content/@badtzx0/components/animated-card-chart/index.html) - **Stats Card** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/stats-card-2/index.html) - **Credit Card Dialog** \\ by Ruixen](/content/@ruixen.ui/components/credit-card-dialog/index.html) - **Cards** \\ by prebuiltui](/content/@prebuiltui/components/cards/simple-card-with-button/index.html) - **Icon 3D Hover** \\ by Jatin Yadav](/content/@jatin-yadav05/components/icon-3d-hover/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/index.html) - **System Status Block** \\ by Preet Suthar](/content/@preetsuthar17/components/system-status-block/index.html) - **Feature Toggle Switch Cards** \\ by Cnippet](/content/@cnippet.dev/components/v-switch-8/index.html) - **Animated 3D Card** \\ by Shailendra Kumar](/content/@shailendrakumar19999/components/animated-3d-card/index.html) - **Card with Grid Ellipsis Pattern** \\ by Indie UI](/content/@Ali-Hussein-dev/components/card-with-grid-ellipsis-pattern/index.html) - **Leaderboard Card** \\ by trophyso](/content/@trophyso/components/leaderboard-card/index.html) - **Crypto Dashboard** \\ by reuno-ui](/content/@reuno-ui/components/crypto-dashboard/background-plus/index.html) - **The Item one** \\ by felipemenezes098](/content/@felipemenezes098/components/the-item-one/item-header-and-footer/index.html) - **Item** \\ by shadcn](/content/@shadcn/components/item/header/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/testimonial-with-outer-border/index.html) - **Stats cards with links** \\ by Ephraim Duncan](/content/@ephraimduncan/components/stats-cards-with-links/stats-card-with-progress/index.html) - **3D Testimonails** \\ by Sean Hello](/content/@sean0205/components/3d-testimonails/index.html) - **Statistics Card 12** \\ by Sean Hello](/content/@sean0205/components/statistics-card-12/index.html) - **Line Charts 4** \\ by Sean Hello](/content/@sean0205/components/line-charts-4/index.html) - **Login & Signup** \\ by Ephraim Duncan](/content/@ephraimduncan/components/login-signup/login-with-sso/index.html) - **Testimonials** \\ by Méschac Irung](/content/@meschacirung/components/testimonials/index.html) - **Pricing Cards** \\ by prebuiltui](/content/@prebuiltui/components/pricing-cards/gradient-pricing-card/index.html) - **Dark Grid** \\ by Liana Pepanyan](/content/@lyanchouss/components/dark-grid/index.html) - **Login Card Signup Form** \\ by Ephraim Duncan](/content/@ephraimduncan/components/login-05/index.html) - **Flip Card** \\ by Umair Waheed](/content/@m.umairwaheedansari/components/flip-card/index.html) - **MusicPlayerCard** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/music-player-card/index.html) - **Cards** \\ by prebuiltui](/content/@prebuiltui/components/cards/simple-card/index.html) - **Tour** \\ by Niaz Morshed](/content/@niazmorshed2007/components/tour/index.html) - **InsuranceSummaryCard** \\ by Ruixen](/content/@ruixen.ui/components/insurance-summary-card/index.html) - **Admit One Ticket** \\ by 21st Indexer](/content/@larsen66/components/admit-one-ticket/index.html) - **Reshaped Card** \\ by reshaped](/content/@reshaped/components/reshaped-card/height/index.html) - **Hover Card** \\ by Abraham](/content/@anubra266/components/hover-card/product-info-card/index.html) - **Service Card** \\ by LaviKatiyar](/content/@lavikatiyar/components/service-card/index.html) - **KPI Card** \\ by nayan\_radadiya6](/content/@nayan_radadiya6/components/kpi-card/basic-kpi-card/index.html) - **Article Cards** \\ by Kavi Katiyar](/content/@kavikatiyar/components/article-cards/index.html) - **Border Beam Panel** \\ by Mehi](/content/@rmahammad/components/border-beam-panel/index.html) - **Pricing Card** \\ by Shaban Haider](/content/@sshahaider/components/pricing-card/multi-cards/index.html) - **Tilt Card** \\ by tom](/content/@tom_ui/components/tilt-card/gravitate/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/testimonial-section/index.html) - **Stats cards with links** \\ by Ephraim Duncan](/content/@ephraimduncan/components/stats-cards-with-links/stats-with-trending/index.html) - **Area Charts 2** \\ by Sean Hello](/content/@sean0205/components/area-charts-2/index.html) - **Statistics Card 2** \\ by Sean Hello](/content/@sean0205/components/statistics-card-2/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/card-component-features-section/index.html) - **Line Charts 1** \\ by Sean Hello](/content/@sean0205/components/line-charts-1/index.html) - **Area Chart Medium** \\ by REAVIZ](/content/@reaviz/components/area-chart-medium/index.html) - **Testimonials** \\ by Méschac Irung](/content/@meschacirung/components/testimonials/testimonials-four/index.html) - **Bold Stats** \\ by ui layout](/content/@uilayout.contact/components/stats-bold/index.html) - **Crypto Dashboard** \\ by reuno-ui](/content/@reuno-ui/components/crypto-dashboard/index.html) - **Weather Card** \\ by user\_xn1cklas](/content/@user_xn1cklas/components/weather-card/index.html) - **Radio Group 1** \\ by ShadcnStudio](/content/@ShadcnStudio/components/radio-group-1/radio-group-thirtheen/index.html) - **stack card** \\ by Awanish Verma](/content/@avanishverma4/components/stack-card/index.html) - **Pricing Base** \\ by Méschac Irung](/content/@meschacirung/components/pricing-base/pricing/index.html) - **Camera Permission Request Card** \\ by Ahmed Mayara](/content/@ahmedmayara/components/camera-permission-request-card/index.html) - **Calendar** \\ by ShadcnStudio](/content/@ShadcnStudio/components/calendar-1/calendar-twenty-three/index.html) - **Stats Widget** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/stats-widget/index.html) - **Integrations Component** \\ by Méschac Irung](/content/@meschacirung/components/integrations-component/integrations-8/index.html) - **Animated List** \\ by Dillion Verma](/content/@dillionverma/components/animated-list/index.html) - **Stacked Card Carousel** \\ by ShadcnSpace](/content/@shadcnspace/components/carousel-07/index.html) - **Animated Card** \\ by Kavi Katiyar](/content/@kavikatiyar/components/animated-card/index.html) - **Gradient Card** \\ by Jatin Yadav](/content/@jatin-yadav05/components/gradient-card/index.html) - **Blogs** \\ by Cnippet](/content/@cnippet.dev/components/blogs/index.html) - **Animate Card Animation** \\ by Jessi](/content/@moazamtrade/components/animate-card-animation/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/review-rating-card/index.html) - **Stats cards with links** \\ by Ephraim Duncan](/content/@ephraimduncan/components/stats-cards-with-links/index.html) - **Statistics Card 7** \\ by Sean Hello](/content/@sean0205/components/statistics-card-7/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-company-workflow/index.html) - **Line Charts 9** \\ by Sean Hello](/content/@sean0205/components/line-charts-9/index.html) - **Pricing Cards** \\ by prebuiltui](/content/@prebuiltui/components/pricing-cards/index.html) - **Switch** \\ by ShadcnStudio](/content/@ShadcnStudio/components/switch-1/switch-seventeen/index.html) - **Card With Lines Patter** \\ by Indie UI](/content/@Ali-Hussein-dev/components/card-with-lines-patter/index.html) - **Cards Grid** \\ by Kavi Katiyar](/content/@kavikatiyar/components/cards-grid/index.html) - **Project Card** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/project-card/index.html) - **Total Sales Chart** \\ by Ahmed Mayara](/content/@ahmedmayara/components/total-sales-chart/index.html) - **Reshaped Card** \\ by reshaped](/content/@reshaped/components/reshaped-card/sections/index.html) - **Stats Defautlt** \\ by Méschac Irung](/content/@meschacirung/components/stats-defautlt/index.html) - **Statistics Card** \\ by Erik](/content/@aghasisahakyan1/components/statistics-card/index.html) - **Spotlight Card** \\ by Berkcan Gümüşışık](/content/@berkcangumusisik/components/spotlight-card/index.html) - **Verification Card** \\ by Ruixen](/content/@ruixen.ui/components/verification-card/index.html) - **Sparkle Card** \\ by user\_hardp](/content/@user_hardp/components/sparkle-card/index.html) - **Feature Section with Bento Grid** \\ by Tommy Jepsen](/content/@tommyjepsen/components/feature-section-with-bento-grid/index.html) - **Features 10** \\ by Méschac Irung](/content/@meschacirung/components/features-10/index.html) - **Market Snapshot** \\ by Savva Sicevs](/content/@ssicevs/components/market-snapshot/market-snapshot-demo/index.html) - **Features Grid** \\ by gooseui](/content/@gooseui/components/features-grid/index.html) - **Credit Card** \\ by ExtendUI](/content/@rynkovski/components/credit-card/index.html) - **Weather Widget** \\ by Fahad Yaseen](/content/@fahadyaseen001/components/weather-widget/weather-widget-demo/index.html) - **3d Wrapper** \\ by badtz](/content/@badtzx0/components/3d-wrapper/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/testimonial-with-hover-tooltip/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-team/index.html) - **Stats Cards** \\ by Berat Berkay Gökdemir](/content/@beratberkayg/components/stats-cards/index.html) - **Hover Card** \\ by Sean Hello](/content/@sean0205/components/hover-card-1/index.html) - **Horizontal Scroll Carousel** \\ by Sonu kumar](/content/@uniquesonu/components/horizontal-scroll-carousel/index.html) - **Pricing Base** \\ by Méschac Irung](/content/@meschacirung/components/pricing-base/index.html) - **Schema Card with Animated Wave Visualizer** \\ by Le Thanh](/content/@minhxthanh/components/schema-card-with-animated-wave-visualizer/index.html) - **Book** \\ by tigran tumasov](/content/@shugar/components/book/index.html) - **Testimonials** \\ by Méschac Irung](/content/@meschacirung/components/testimonials/testimonials-five/index.html) - **Holo Card** \\ by Mehi](/content/@rmahammad/components/holo-card/index.html) - **Recipe Card** \\ by uğur sözen](/content/@ziegfiroyt/components/automation10/index.html) - **Stock Card** \\ by Ravi Katiyar](/content/@ravikatiyar162/components/stock-card/index.html) - **Card Frame Table** \\ by Cnippet](/content/@cnippet.dev/components/v-table-3/index.html) - **Animated Countdown** \\ by nexus-ui](/content/@nexus-ui/components/animated-countdown/index.html) - **Glare Card** \\ by Manu Arora](/content/@manuarora700/components/glare-card/index.html) - **Card with Grid Pattern** \\ by Indie UI](/content/@Ali-Hussein-dev/components/card-with-grid-pattern/index.html) - **Scroll Area** \\ by Sean Hello](/content/@sean0205/components/scroll-area/index.html) - **Upload Ui** \\ by kristen17](/content/@kristen17/components/upload-ui/index.html) - **Stats** \\ by Méschac Irung](/content/@meschacirung/components/stats/stats-info-and-numbers/index.html) - **Glass Shine Card** \\ by Dhileep Kumar GM](/content/@dhileepkumargm/components/glass-shine-card/index.html) - **Leaderboard Podium** \\ by trophyso](/content/@trophyso/components/leaderboard-podium/index.html) - **Card Studio** \\ by ShadcnStudio](/content/@ShadcnStudio/components/card-studio/card-eight/index.html) - **The Item one** \\ by felipemenezes098](/content/@felipemenezes098/components/the-item-one/with-thumbnail/index.html) - **Linear Card** \\ by ui layout](/content/@uilayout.contact/components/linear-card/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-credit-card-showcase/index.html) - **Pricing Base** \\ by Méschac Irung](/content/@meschacirung/components/pricing-base/pricing-three/index.html) - **Book** \\ by tigran tumasov](/content/@shugar/components/book/responsive/index.html) - **Tool Invocation** \\ by Alwurts](/content/@Alwurts/components/tool-invocation/index.html) - **Download File Button** \\ by utilcn](/content/@utilcn/components/download-file/index.html) - **The Item one** \\ by felipemenezes098](/content/@felipemenezes098/components/the-item-one/sizes/index.html) - **Feature Modern** \\ by brijr](/content/@brijr/components/feature-modern/feature-two/index.html) - **Ruixen Bento Cards** \\ by Ruixen](/content/@ruixen.ui/components/ruixen-bento-cards/index.html) - **Tooltip** \\ by Abraham](/content/@anubra266/components/tooltip-1/tooltip-status-card/index.html) - **Music Player Widget** \\ by Muhammad Ammar](/content/@smammar100/components/music-player-widget/index.html) - **KPI Card** \\ by nayan\_radadiya6](/content/@nayan_radadiya6/components/kpi-card/negative-trend-kpi/index.html) - **Hover Effect** \\ by Serafim](/content/@serafimcloud/components/hover-effect/index.html) - **Hover Preview Button** \\ by Ruixen](/content/@ruixen.ui/components/hover-preview-button/index.html) - **Modern Payment Form** \\ by Ruixen](/content/@ruixen.ui/components/modern-payment-form/index.html) - **Glare Cards** \\ by daiv09](/content/@daiwiikharihar/components/glare-cards/index.html) - **Segment Group** \\ by Abraham](/content/@anubra266/components/segment-group/theme-selector-group/index.html) - **Horizontal Bar big** \\ by REAVIZ](/content/@reaviz/components/horizontal-bar-big/index.html) - **Surface** \\ by Hero Ui](/content/@hero_ui/components/heroui-surface/index.html) - **Stats Defautlt** \\ by Méschac Irung](/content/@meschacirung/components/stats-defautlt/stats-three/index.html) - **Testimonial-v2** \\ by Awanish Verma](/content/@avanishverma4/components/testimonial-v2/index.html) - **Item** \\ by shadcn](/content/@shadcn/components/item/index.html) - **Context Card** \\ by tigran tumasov](/content/@shugar/components/context-card-1/index.html) - **Hover Card** \\ by shadcn](/content/@originui/components/hover-card/hover-card-with-user-details/index.html) - **Testimonial** \\ by prebuiltui](/content/@prebuiltui/components/testimonial/testimonial-of-students/index.html) - **Feature Sections** \\ by prebuiltui](/content/@prebuiltui/components/feature-sections/features-section-with-trusted-companies/index.html) - **Book** \\ by tigran tumasov](/content/@shugar/components/book/custom-color/index.html) - **The Item one** \\ by felipemenezes098](/content/@felipemenezes098/components/the-item-one/item-as-link/index.html) - **Heatmap Calendar** \\ by Ruixen](/content/@ruixen.ui/components/heatmap-calendar/index.html) - **Glass Card** \\ by Smit Prajapati](/content/@Smit-Prajapati/components/glass-card/index.html) - **ProjectProgressCard** \\ by Ruixen](/content/@ruixen.ui/components/project-progress-card/index.html) - **Integrations Component** \\ by Méschac Irung](/content/@meschacirung/components/integrations-component/integrations-6/index.html) ## 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. ## Frequently asked questions ### How do I create a card component in React? ### Do these follow shadcn/ui conventions? ### Are there animated or hover-effect cards? ### Can I use these cards with Vue? ## Related components [Animated Card80](/content/community/components/s/animated-card/index.html) [Animation144](/content/community/components/s/animation/index.html) [Animated16](/content/community/components/s/animated/index.html) [Features318](/content/community/components/s/features/index.html) [3D Card120](/content/community/components/s/3d-card/index.html) [Hover Card77](/content/community/components/s/hover-card/index.html)