React Card Components

Dev Design Library indexes 836 React card components from 79 open-source UI libraries, with the most coming from Watermelon UI, OpenSourceUI, Tremor Blocks, FLX UI and Shadcn Space. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Card components belong to the Data display group.

Showing 120 of 836, a mix from every library. Open a library to see all of its components.

• Cardshadcn/ui · ReactDisplays a card with header, content, and footer.
• CardMUI / Material UI · React
• Bounce CardsReact Bits · ReactCards bounce that bounce in on mount.
• CardChakra UI · ReactUsed to display content related to a single subject.
• CardHeroUI · ReactDisplays a card container with flexible layout sections for structured content.
• Magic CardMagic UI · ReactA spotlight effect that follows your mouse cursor and highlights borders on hover.
• CardReact Spectrum · ReactA Card summarizes an object that a user can select or navigate to.
• Cardcoss ui · ReactA content container for grouping related information.
• Comp 164Origin UI · React
• CardRadix Themes · React
• Border Beam CardCult UI · Reactborder-beam around compound Card API with balanced title and description
• CardTremor · React
• Basic cardReUI · ReactBasic card
• Cardpdfcn · ReactCard PDF component (forme)
• Card Cascade StaggerAmicro Micro Transitions · ReactStack of cards that cascade into place one after another.
• AgentAI Elements · ReactA composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
• CardPark UI · ReactA container component for grouping related content and actions.
• Guide CardLobe UI · ReactGuideCard is a component used to display visual guides, introductory content, or instructional information with an…
• Apple Activity CardKokonut UI · ReactActivity rings that draw with a count-up, lap past 100% with a shadowed end cap and dim to focus, built with React and…
• cardIntent UI · Reactcard
• Credit CardUntitled UI React · React
• Approval CardbeUI · ReactCollects structured human input during a paused run.
• CardTailGrids · ReactA card component with ultimate flexibility and customization.
• Folder ComponentRare UI · ReactAn animated folder whose cards fan out on hover and lift open on click, with a 3D-tilted flap. Supports color and size…
• Account Access CardSpectrum UI · ReactA credentials card that auto-fills email and password on a loop, with a danger zone.
• Perspective BookSpell UI · ReactA 3D book component with hover animation and customizable appearance.
• Cursor CardVengeance UI · ReactInline text link with cursor tracking preview card
• CardFluid Functionalism · Reactshadcn's compositional card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with…
• CardToolcraft · React
• CardLaunch UI · React
• CardPanel UI · React NativeContent surface with header, body and footer.
• Accordion-04 - CardShadcn Space · ReactAccordion wrapped in a rounded card with left-aligned +/- icons and border dividers
• Card AnimationPixel Perfect · ReactFramer Motion card animation.
• Linked In Post CardOpenSourceUI · ReactCard that reproduces a LinkedIn post: author, text, image and reaction bar.
• Accessible Actionuselayouts · ReactInteractive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth…
• CardPrebuiltUI · React
• DashboardBoardUI · React
• Case Study Flip StackComponentry · ReactEditorial case study cards that fold upward on scroll to reveal the next story.
• CardTremor Blocks · React
• CardShadcn Dashboard · React
• Cursor CardsBadtz UI · ReactInteractive cards with animated gradient borders that respond to cursor movement and proximity. Inspired by Cursor's…
• CardObsidianUI · React
• CardGreatUI · React
• Social Proof Testimonial gridNexvyn UI · ReactTestimonial cards in two or three columns, with a Show more toggle on mobile.
• Channel Stripaudiocn · ReactOne channel of a mixer: header, status, meter, fader, value, controls and a notice, as a row or a console strip. The…
• Expandable CardForge UI · ReactInteractive UI component to expand cards with smooth animations and detailed content using layout transitions.
• cardBaseLayer · ReactDisplays a card with header, content, and footer.
• CardShark UI · ReactDisplays content about a single subject.
• Folder Tab CardRewamp UI · ReactA modern tactile UI card featuring an ethereal animated mesh aurora gradient header, circular diagonal glass arrow…
• MoviePassButtonEvil Buttons · ReactA cinema ticket button that tears along its perforation on click, hinging open or snapping apart.
• Spotlight CardSona UI · ReactA card with a radial spotlight glow that follows the cursor.
• Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
• Blog gridArc Library · ReactA blog index with a featured post, category filter, post cards, pagination and an in-place reader.
• Glass Cardglasscn · ReactGlass Card with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Expanding CardUI Lab · ReactGrows from its slot into a detail view and folds back when you are done.
• AttachmentHextaUI · ReactFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their…
• Transcribed Note CardLocalMode · ReactA transcription list item pairing transcript text with inline <audio> playback — relative timestamp (hover ->…
• Bento GridCojeev UI · ReactA complete canvas of rounded cards or organically interlocking pieces. Compose a layout, then install just the…
• Hover Glide CardsMicroKit · ReactOne highlight glides from card to card under the pointer, seen only through the cards themselves, so it drains out of…
• CardROI UI · ReactA container component for displaying content.
• BasicFLX UI · ReactHeader, action, content, and a bordered footer.
• 3D CardVelora UI · ReactPerspective card that turns toward the pointer while its layers lift to different depths.
• Approval Card PatternHalaska UI · React
• Balance CardPin UI · React
• CardMetal UI · React + SwiftUIA person's thing on a raised plate: media, title, a line, actions. A card with a link lifts one grid step on the…
• CardSpaceUI · ReactGroups related information, images, and action buttons into a bordered container, creating clear visual sections on…
• Aria CardReScript shadcn · ReScript
• Add to CartSkecher UI · ReactAn interactive product grid with curved add-to-cart flights, a responsive cart stack, and an animated currency total.
• Inline TestimonialsSora UI · ReactA flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.
• Crypto SwitchZAYX · React NativeA crypto swap card: pick the coin you pay and the one you receive, flip them with a spring, and send.
• Cell To Card Calendar ExpansionCue Foundations · React
• CardOUI · ReactCardGridListItem for shadcn Card.
• Glass CardLiquefy UI · React
• AI BlockD2Studio UI · ReactAI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
• CardEaseUI · ReactBordered surface with header, content, and footer parts for grouping related content.
• Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
• AI Voice 05ReactFrame · ReactA portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap…
• Cards Demo 3Aceternity UI · ReactFeature Block Animated Card
• Cardark-cn · ReactA flexible container for grouping related content and actions.
• Card Action AreaMUI / Material UI · React
• Card SwapReact Bits · ReactCards animate position swapping with smooth layout transitions.
• Checkbox CardChakra UI · ReactUsed to select or deselect options displayed within cards.
• Neon Gradient CardMagic UI · ReactA beautiful neon card effect
• Select Box GroupReact Spectrum · ReactSelectBoxGroup allows users to select one or more options from a list.
• Framecoss ui · ReactA framed container for grouping related information.
• Comp 166Origin UI · React
• Checkbox CardsRadix Themes · React
• Cutout CardCult UI · ReactImage card with cutout corners, hover motion, inset labels, pins, and reveal actions
• Radio Card GroupTremor · React
• Full card with image and shadow fade effectReUI · ReactFull card with image and shadow fade effect
• Cardpdfcn · ReactCard PDF component (takumi)
• Card Preview TileAmicro Micro Transitions · ReactCatalog preview for a card spread / carousel. Hover state lives here so hovering one tile re-renders only that tile…
• ArtifactAI Elements · ReactA container component for displaying generated content like code, documents, or other outputs with built-in actions.
• Radio Card GroupPark UI · ReactA form input component for selecting one option from a set of cards.
• Awesome Agent Skill CardLobe UI · React
• Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
• chart-01Intent UI · Reactchart-01
• CardbeUI · ReactComposable surfaces, selectable with press feedback.
• AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
• Spotify CardSpell UI · ReactDisplay Spotify tracks with album art and blurred background.
• Folder PreviewVengeance UI · ReactFolder stack visual preview
• ItemLaunch UI · React
• Flip CardPanel UI · React NativeTwo faces of one card, and a turn between them.
• Aspect Ratio 06 - Product CardShadcn Space · ReactA product card using a 4:5 aspect ratio image with a discount badge and pricing details.
• Card ScanPixel Perfect · ReactHover it and it turns holographic: thin-film foil that shifts as you move, light rippling out from the cursor, and a…
• Linked In Profile CardOpenSourceUI · ReactCard that reproduces a LinkedIn profile: cover, avatar, name, headline and connect button.
• Card Folderuselayouts · ReactThis component creates an animated folder-style card with a background image, floating 3D object, hover effects, and…
• MedicalBoardUI · React
• Flight Status CardComponentry · ReactA detailed card showing flight information with animations.
• Radio Card GroupTremor Blocks · React
• Hover CardShadcn Dashboard · React
• Expandable CardBadtz UI · ReactA versatile and engaging UI component that allows users to explore content in a more immersive way.
• Facebook CardGreatUI · React
• Microphone Setupaudiocn · ReactChoose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that…
• Fraud CardForge UI · ReactA security alert card inspired by Clerk's landing page, showcasing blocked emails with smooth hover animations.
• Template BlogShark UI · React
• Orbital Card ArchRewamp UI · ReactExact recreation of Recording 2026-09-15 154820.mp4: Cards gliding along a panoramic 3D curved horizon cylinder…
• Cursor Hover CardSona UI · React
• Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
• CardArc Library · ReactA contained group of related content and actions.

Libraries with React card components

• Watermelon UI
• OpenSourceUI
• Tremor Blocks
• FLX UI
• Shadcn Space

Related categories

• Card Components
• Tailwind CSS Card Components
• Svelte Card Components
• React Native Card Components
• Animated Card Components
• shadcn/ui Card Components
• React Data Display Components
• React Chart Components
• React Table Components
• React Avatar Components
• React List Components
• React Stat Components
• React Calendar Components
• React Accordion Components
• React Carousel Components
• React Collapsible Components
• React Data Table Components
• React Avatar Group Components
• React Tree View Components
• React Card Stack Components
• React Line Chart Components
• React Counter Components