Star Button

Buttons 615

About

The StarButton is a visually striking button that features a radial light animation with a starry background.

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

Code

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

Usage.tsx

import { StarButton } from "@/components/ui/star-button";
import { useTheme } from "next-themes";
import { useState, useEffect } from "react";
 
export default function StarButtonDemo() {
  const { theme } = useTheme();
  const [lightColor, setLightColor] = useState("#FAFAFA");
 
  useEffect(() => {
    setLightColor(theme === "dark" ? "#FAFAFA" : "#FF2056");
  }, [theme]);
 
  return (
    <div>
      <StarButton lightColor={lightColor} className="rounded-3xl">
        Button
      </StarButton>
    </div>
  );
}