Components
Loading preview...
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.
@muhammad-binsalman
npx shadcn@latest add https://21st.dev/r/muhammad-binsalman/shiny-buttonimport { 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>
);
};