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
Hero Sections
Hero Sections
Primary landing page sections for main value propositions and key messages - built with shadcn/ui.
View blocks
Preview in Figma
Preview
Docs
Hero section with image on the right
hero-section-1
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-1&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with list and image on the right
hero-section-2
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-2&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with image on the left
hero-section-3
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-3&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with input and image on the right
hero-section-4
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-4&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with input and video on the right
hero-section-5
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-5&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with centered text and image in the background
hero-section-6
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-6&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with text in 2 columns and a full-width image
hero-section-7
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-7&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with centered text and rating
hero-section-8
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-8&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with centered text and a full-width video
hero-section-9
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-9&key=YOUR_LICENSE_KEY"
Get access in
Premium
Hero section with centered text, full-width image and group of logo
hero-section-10
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-10&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