PreviewFeatures
Flexible container with header, content, and footer sections
Multiple variants for different visual treatments
Perfect for dashboards, product listings, and content displays
Built-in support for images, icons, and media
Hover states and interactive card patterns
Responsive design that adapts to any grid system
Shadcn/ui Card - Figma Component
Displays a card with header, content, and footer. This Figma component is part of our comprehensive design system that brings the popular shadcn/ui library into your design workflow.
Every Card variant includes all the necessary states, properties, and styling options you need to create consistent, production-ready designs. The component seamlessly integrates with your existing Figma files and maintains full compatibility with the shadcn/ui React implementation.
Your questions, answered
Browse all 58 components
Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Chart
Checkbox
Collapsible
Combobox
Command
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Form
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spinner
Switch
Table
Tabs
Textarea
Toast
Toggle Group
Toggle
Tooltip
Designing cards in Figma
The shadcn/ui figma Card includes header, content, and footer sections for flexible layouts. Design product cards, dashboards, and content previews in Figma using this versatile shadcn figma component that matches the React code structure exactly.
Card grids and layouts
Design card grids in Figma for dashboards, product listings, and blog layouts. The shadcn/ui figma Card component works perfectly in responsive grids—design once and it adapts from single-column mobile to multi-column desktop layouts.
Interactive card states
This shadcn figma Card includes hover states for clickable product cards and navigation tiles. Design interactive card patterns in Figma with proper visual feedback showing users what's clickable.
Card variants and styling
The shadcn/ui figma Card component includes bordered and shadowed variants. Design consistent card layouts in Figma for your entire application knowing developers can implement them using the exact same shadcn/ui Card structure.