Spotlight Button

Buttons 1

About

A premium, high-quality button featuring a dynamic spotlight effect that follows the user's mouse cursor, creating an engaging and interactive experience.

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

Code

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

Usage.tsx

import { SpotlightButton } from "@/components/ui/spotlight-button";


export default function DemoOne() {
  return (
    <div className="w-full h-screen flex items-center justify-center gap-8 bg-white dark:bg-black text-black dark:text-whit">
      <SpotlightButton>21st.dev</SpotlightButton>
      <SpotlightButton variant="variant">Button</SpotlightButton>
    </div>
  );
};