design-infraReport a problem or share feedback← Catalog
Spotlight
freeaceternity/spotlight
A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.
$
npx shadcn@latest add @aceternity/spotlight- Source
- Aceternity UI
- Kind
- component
- Categories
- hero, footer
- Use as
- drop-in — replaces your component
- Applies to
- herofooter
- Motion
- on enter · medium · motion · medium cost
- Tags
- section, special
- Licence
- Free for unlimited personal & commercial projects; no redistributing as a competing library. Pro/All-Access is a one-time purchase.
- Live demo
- ui.aceternity.com
- Docs
- ui.aceternity.com
Similar
Compare all 4 →- Template · SaaS landing pageoc/template-landingStarter page → app/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 10 @oc blocks. Preview: /templates/template-landing.
- Fey.com Macbook Scrollaceternity/macbook-scrollFey-style laptop reveal. Heavy; one per page max.
- Spotlight Newaceternity/spotlight-newBest 'premium dark' hero backdrop. Hard-codes a blue hsla gradient — pass gradientFirst/Second/Third or use @oc/hero-spotlight, which tints it from --primary.