All Heroes blocks
Hero 2
Full-bleed background with centered content
A bold, immersive hero that places the headline and call to action directly on a full-bleed visual background. Designed to create mood and instant impact, with social proof reinforcing credibility. Best used when you want an emotional first impression and strong brand presence right at the top.
Pro Marketing Figma React
All blocks
More Heroes
Pro
Hero 1
Centered headline with media hero
Pro
Hero 3
Light background with centered content
Pro
Hero 4
Soft gradient hero with dual CTAs and rating
Pro
Hero 5
Split layout with waitlist capture
Pro
Hero 6
Feature-led split hero
Pro
Hero 7
Editorial story hero
Pro
Hero 8
Minimal page header
Pro
Hero 9
Page header with supporting visual
Pro
Hero 10
Full-bleed image hero
Benefits
Production-ready by default
Built with shadcn/ui conventions and designed for real projects.
Built with shadcn/ui
Clean React components using Tailwind and modern shadcn patterns.
Install instantly
Add the block directly using the shadcn CLI.
Works with your theme
Compatible with shadcn themes and token-based color systems.
MCP server support
Use shadcn MCP server right from your favorite AI tools.
