Components
Loading preview...
An animated gradient background which transitions between colors for text. Add the following animations to your tailwind.config.js file: extend: { animation: { gradient: "gradient 8s linear infinite", }, keyframes: { gradient: { to: { backgroundPosition: "var(--bg-size) 0", }, }, },
npx shadcn@latest add https://21st.dev/r/dillionverma/animated-gradient-textimport { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { AnimatedGradientText } from "@/components/ui/animated-gradient-text";
function AnimatedGradientTextDemo() {
return (
<div className="z-10 flex min-h-64 items-center justify-center">
<AnimatedGradientText>
🎉 <hr className="mx-2 h-4 w-px shrink-0 bg-gray-300" />{" "}
<span
className={cn(
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
)}
>
Introducing Magic UI
</span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedGradientText>
</div>
);
}
export { AnimatedGradientTextDemo };