Slide Link

A smooth and modern link component with a slide animation effect.

Link

Slide Animation

import { SlideLink } from "@/components/ui/slide-link";

export default function Home() {
  return (
    <div>
      <SlideLink href="#" text="Slide Link" />
    </div>
  );
}

Installation

Paste this code in your terminal

npx shadcn@latest add https://rohitnirban.com/r/slide-link.json

Install dependencies

npm i motion clsx tailwind-merge

Add util file

lib/utils.ts

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Copy the source code

components/ui/slide-link.tsx

"use client";

import { cn } from "@/lib/utils";
import { motion, type Transition } from "motion/react";

const transition: Transition = {
  type: "tween",
  ease: [0.9, 0, 0.2, 1],
  duration: 0.4,
};

interface SlideLinkProps {
  href: string;
  text: React.ReactNode;
  className?: string;
}

export function SlideLink({
  href = "#",
  text,
  className,
  ...props
}: SlideLinkProps & React.ComponentProps<typeof motion.a>) {
  return (
    <motion.a
      href={href}
      className="relative inline-flex cursor-pointer overflow-hidden font-medium no-underline"
      initial="initial"
      whileHover="hover"
      {...props}
    >
      <motion.div
        variants={{
          initial: { y: 0 },
          hover: { y: "100%" },
        }}
        transition={transition}
        className={cn("absolute inset-0", className)}
      >
        {text}
      </motion.div>
      <motion.div
        variants={{
          initial: { y: "-100%" },
          hover: { y: 0 },
        }}
        transition={transition}
        className={cn(className)}
      >
        {text}
      </motion.div>
    </motion.a>
  );
}

Props

Prop	Type	Default	Required
`href` The path or URL to navigate to.	`string`	"#"	No
`text` The text or content to be displayed.	`React.ReactNode`	—	Yes
`className` Additional CSS classes for custom styling.	`string`	—	No