New update
The newest Tailwind v4 and shadcn/ui version is now supported in our Figma kit, Plugin and Pro Blocks!
shadcn
design
Components
Pro Blocks
Plugin
Templates
Resources
Docs
Updates
Roadmap
Help & Contact
Pricing
Pro Blocks
Cards
Cards
Customizable cards for showcasing products, content, or user actions - built with shadcn/ui.
View blocks
Preview in Figma
Preview
Docs
Card with avatar, badge and 2 buttons
card-1
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-1&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with avatar and badge
card-2
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-2&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with big avatar and 2 buttons
card-3
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-3&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with badge, group of avatars and details
card-4
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-4&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with avatar, edit button and details
card-5
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-5&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with checkbox, time information and group of avatars
card-6
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-6&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with icon, size information and button
card-7
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-7&key=YOUR_LICENSE_KEY"
Get access in
Premium
Card with icon, size information and 2 buttons
card-8
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=card-8&key=YOUR_LICENSE_KEY"
Get access in
Premium
Pro Blocks are now fully supported in Figma Sites, allowing you to create responsive websites directly within Figma's new website builder.
Get access to coded Pro Blocks in our
Premium Package
Buy now