Spotlight CTA

Buttons 28

About

A unique and interactive call-to-action component that features a "spotlight" effect following the user's cursor. It's designed to be fully theme-aware, supporting both light and dark modes out of the box to create a premium feel on any background.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spotlight CTA to your project and fits it to your theme.

Code

How Spotlight CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {  SpotlightCTA, SpotlightCTAContent, SpotlightCTAText, SpotlightCTAButton } from "@/components/ui/spotlight-cta";

export default function DemoOne() {
 
  return (
    <div className="flex items-center justify-center min-h-screen p-4 font-sans">
      <SpotlightCTA>
        <SpotlightCTAContent>
            <SpotlightCTAText 
                title="Unlock Your Potential"
                description="Join an exclusive community of creators and innovators. Get started today and redefine what's possible."
            />
            <SpotlightCTAButton onClick={() => console.log("Button Clicked!")}>
                Begin Your Journey
            </SpotlightCTAButton>
        </SpotlightCTAContent>
      </SpotlightCTA>
    </div>
  );
}