Components
React animated link: Hover reveals an underline that wipes in from the left, the right, or grows from the center, while a diagonal arrow lifts into view.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/animated-linkLoading preview...
import { AnimatedLink } from "@/components/ui/animated-link";
export default function DemoOne() {
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-8 py-16 text-lg">
{/* underline reveals from the left */}
<AnimatedLink href="#" variant="left">
Hover over me
</AnimatedLink>
{/* underline reveals from the right */}
<AnimatedLink href="#" variant="right">
Hover over me
</AnimatedLink>
{/* underline grows from the center */}
<AnimatedLink href="#" variant="center">
Hover over me
</AnimatedLink>
</div>
);
}