Star Button

Buttons 86

About

Here is Star Button component

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

"use client"

import { useEffect, useState } from "react"
import { useTheme } from "next-themes"

import { StarButton } from "@/components/ui/star-button"

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">
        Hover me
      </StarButton>
    </div>
  )
}