Spotlight
SVG spotlight cone that illuminates content from a configurable origin point.
Preview
Spotlight
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Feature highlight sections and product showcases.
Why this component matters
Context over decoration. A spotlight literally points the user's eye at the most important content.
Usage guidance
Position the spotlight origin to point at your primary CTA or headline. Use one spotlight per section maximum.
Installation
bash
npx shadcn@latest add @aceternity/spotlightUsage
example.tsxtsx
import { Spotlight } from "@/components/ui/spotlight";
export default function Example() {
return (
<Spotlight>
{/* Your content here */}
</Spotlight>
);
}Source
spotlight.tsx
components/ui/spotlight.tsx