design-infraReport a problem or share feedback← Catalog
Hero · Spotlight
curatedtheme-awarefreeoc/hero-spotlight
Centered marketing hero with an original static CSS light treatment using the active theme tokens. No animation or proprietary code.
drop-inPremiumFuturisticRefined
$
npx shadcn@latest add @design-infra/hero-spotlightLive demo — under each design system
brutalist-mono
Now with DESIGN.md themes
Ship interfaces that already look finished
One registry for themes, blocks and curated components — installable with a single command.
editorial
Now with DESIGN.md themes
Ship interfaces that already look finished
One registry for themes, blocks and curated components — installable with a single command.
linear-dark
Now with DESIGN.md themes
Ship interfaces that already look finished
One registry for themes, blocks and curated components — installable with a single command.
soft-glass
Now with DESIGN.md themes
Ship interfaces that already look finished
One registry for themes, blocks and curated components — installable with a single command.
- Source
- oc
- Kind
- block
- Categories
- hero
- Use as
- drop-in — replaces your component
- Applies to
- hero
- Motion
- not tagged (static or unknown)
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Header 5smoothui/header-5Spotlight hero block with dark theme and gradient text
- Hero · Splitoc/hero-splitTwo-column hero: headline, copy, actions and proof bullets on the left; framed product media on the right (themed mock by default). `reverse` flips sides.
- Flip Wordsaceternity/flip-wordsRotating keyword in a headline ("Build ___ faster"). Keep to 3–5 words.