Back to components
Hero section component
Hero 115 — Centered Ring Backdrop
Centered hero with concentric ring decoration, leading icon, headline, supporting text, CTA, byline, and capped hero image.
Source: shadcnblocks
Install
$ Run in your project root
pnpm dlx shadcn add @shadcnblocks/hero115What it does
- Concentric ring decoration behind the copy
- Leading icon slot for product mark / logo
- Headline + supporting paragraph + primary CTA
- Optional byline (small text)
- Capped hero image area below the copy
When to use
Use it
Product launches, app landing pages, anywhere you need a clean centered hero with a single focused CTA.
Skip it
Two-column hero layouts (with hero image on the right) — this one is centered.