Hero Spotlight
Landing page hero with a spotlight gradient, grid backdrop and dual CTAs.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
HeroSpotlightProps
Also accepts all props of Omit<React.ComponentProps<"section">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | { label: string; href?: string } | — | — |
| title* required | React.ReactNode | — | — |
| description | React.ReactNode | — | — |
| primaryAction | Action | — | — |
| secondaryAction | Action | — | — |
| spotlightColor | string | "#f97316" | Color of the spotlight glow |
| showGrid | boolean | true | Draw the faded grid behind the content |
Install
$ npx shadcn@latest add https://chromotion.dev/r/hero-spotlight.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.