Components
Loading preview...
A modern, reusable button with animated gradients, smooth hover/tap interactions, and full dark mode support. Built with ShadCN UI, Tailwind, and Framer Motion — perfect for CTAs, forms, or landing pages.
@chow-stack
npx shadcn@latest add https://21st.dev/r/chowlol202/animated-gradient-button"use client";
import React from "react";
import { ArrowRight, Download, Heart, Star, Send } from "lucide-react";
import { AnimatedButton } from "@/components/ui/animated-gradient-button";
export default function AnimatedButtonDemo() {
const [isLoading, setIsLoading] = React.useState(false);
const handleAsyncAction = async () => {
setIsLoading(true);
await new Promise(resolve => setTimeout(resolve, 2000));
setIsLoading(false);
};
return (
<div className="min-h-screen bg-background flex items-center justify-center p-8">
<div className="space-y-8">
{/* Variants */}
<div className="flex flex-wrap justify-center gap-4">
<AnimatedButton
label="Default"
variant="default"
iconRight={<ArrowRight />}
/>
<AnimatedButton
label="Outline"
variant="outline"
iconLeft={<Download />}
/>
<AnimatedButton
label="Gradient"
variant="gradient"
iconLeft={<Star />}
/>
<AnimatedButton
label="Ghost"
variant="ghost"
/>
</div>
{/* Sizes */}
<div className="flex flex-wrap justify-center items-center gap-4">
<AnimatedButton
label="Small"
size="sm"
variant="default"
/>
<AnimatedButton
label="Medium"
size="md"
variant="gradient"
iconLeft={<Heart />}
/>
<AnimatedButton
label="Large"
size="lg"
variant="outline"
iconRight={<ArrowRight />}
/>
</div>
{/* States */}
<div className="flex flex-wrap justify-center gap-4">
<AnimatedButton
label={isLoading ? "Loading..." : "Click me"}
variant="default"
loading={isLoading}
onClick={handleAsyncAction}
iconRight={!isLoading ? <Send /> : undefined}
/>
<AnimatedButton
label="Disabled"
variant="outline"
disabled
/>
</div>
</div>
</div>
);
}