A React link with an animated arrow on hover. Built with Tailwind CSS, accessible, and easy to restyle.
import { ArrowLink } from "@/components/arrow-link";
function ArrowLinkDemo() {
return (
<ArrowLink href="/work-with-us" target="_blank">Work with us</ArrowLink>
<ArrowLink href="/work-with-us" className="text-primary hover:text-accent-demo">I've custom style</ArrowLink>
);
}Install the following dependencies:
npm install lucide-reactbun add lucide-reactdeno add lucide-reactpnpm add lucide-reactyarn add lucide-reactCopy and paste the following code into your project.
import type { LinkProps } from "next/link";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { MoveUpRight } from "lucide-react";
function ArrowLink({
children,
className,
...props
}: LinkProps & { children: React.ReactNode; className?: string }) {
return (
<Link
{...props}
className={cn(
"text-sm text-muted-foreground group hover:text-foreground transition-all duration-150 flex items-center gap-2",
className
)}
>
{children}
<div className="relative overflow-hidden">
<MoveUpRight className="size-4 group-hover:transition-all group-hover:duration-150 group-hover:-translate-y-full group-hover:translate-x-full " />
<MoveUpRight className="absolute size-4 top-[160%] group-hover:top-1/2 -translate-y-1/2 -left-[60%] group-hover:left-1/2 -translate-x-1/2 group-hover:transition-all group-hover:duration-150" />
</div>
</Link>
);
}
export { ArrowLink };
import { ArrowLink } from "@/components/arrow-link";<ArrowLink href="/work-with-us" target="_blank">Work with us</ArrowLink>It inherits all the props of the native Link component, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | The class name to be applied to the link. |
| children | ReactNode | - | The content of the link. |