Components
A beautiful, animated, and theme-aware circular button component built with Tailwind CSS. Includes hover effects, rotating transitions, gradient overlays, and support for custom icons. Perfect for modern dashboards, media apps, or landing pages that need a premium visual punch.
npx shadcn@latest add https://21st.dev/r/muhammad-binsalman/shiny-buttonLoading preview...
import { FaYoutube, FaXTwitter, FaSpotify, FaReact } from 'react-icons/fa6';
import FancyButton from '@/components/ui/shiny-button';
export default function DemoOne(){
return (
<div className="grid grid-cols-2 gap-6 max-w-md mx-auto">
<FancyButton icon={<FaReact size={28} />} variant="default" />
<FancyButton icon={<FaSpotify size={28} className="text-green-500" />} variant="green" />
<FancyButton icon={<FaXTwitter size={28} className="text-indigo-500" />} variant="indigo" />
<FancyButton icon={<FaYoutube size={28} className="text-red-500" />} variant="red" />
</div>
);
};