Components
Loading preview...
An animated subscribe button useful for showing a micro animation from intial to final result.
npx shadcn@latest add https://21st.dev/r/dillionverma/animated-subscribe-buttonimport { CheckIcon, ChevronRightIcon } from "lucide-react";
import { AnimatedSubscribeButton } from "@/components/ui/animated-subscribe-button";
export function AnimatedSubscribeButtonDemo() {
return (
<AnimatedSubscribeButton
buttonColor="#000000"
buttonTextColor="#ffffff"
subscribeStatus={false}
initialText={
<span className="group inline-flex items-center">
Subscribe{" "}
<ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
</span>
}
changeText={
<span className="group inline-flex items-center">
<CheckIcon className="mr-2 size-4" />
Subscribed{" "}
</span>
}
/>
);
}