Back to components
Hero section component
Spiral Background Hero
A hero section with a golden spiral background — eye-catching for landing pages.
Source: ncdai · 21st.dev
Install
$ Run in your project root
npx shadcn@latest add @ncdai/hero-01What it does
- Golden ratio spiral SVG backdrop
- Centered headline + sub + CTA stack
- Light + dark mode aware
- Drop-in replacement for any hero block
When to use
Use it
Marketing landing pages where you want a distinctive, premium-feeling hero with mathematical/geometric energy.
Skip it
Dashboard apps or anywhere a busy backdrop would distract from the actual UI.