All Heroes blocks
Hero 7
Editorial story hero
A narrative-led hero that explains the problem before selling the solution. Uses longer-form copy, author attribution, and a strong visual to build trust and context. Best suited to thought leadership, launch posts, or product pages where education and credibility come before conversion.
Pro Marketing Figma React
All blocks
More Heroes
Pro
Hero 1
Centered headline with media hero
Pro
Hero 2
Full-bleed background with centered content
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 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.
