All Heroes blocks
Hero 3
Light background with centered content
A calm, airy hero that centers the headline and call to action over a soft, low-contrast background. Designed to feel open and approachable, with social proof placed directly beneath the primary action. Works well for product-led sites that want clarity and reassurance without heavy visual weight.
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 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.
