Back to components
Hero section component
Marketing Hero with Navbar
Modern marketing hero section bundled with a fully styled navbar above it.
Source: meschacirung · 21st.dev
Install
$ Run in your project root
npx shadcn@latest add https://21st.dev/r/meschacirung/hero-section-2What it does
- Includes a matching navbar component
- Modern marketing aesthetic — large headline + supporting copy
- Primary + secondary CTA pair
- Mobile responsive out of the box
When to use
Use it
Marketing sites that need both nav and hero in one consistent design — typically the public-facing landing page.
Skip it
If your project already has a custom navbar — you'd want the standalone hero variant instead.