Link

Navigation

Styled anchor link with variant support.

Preview

Usage

example.jsx

import { Link } from "@/components/ui/link";

export default function Example() {
  return <Link />;
}

Source Code

Copy this file into components/ui/link.jsx in your project.

link.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Link = forwardRef(({ className, variant = "default", ...props }, ref) => (
  <a ref={ref}
    className={cn("inline-flex items-center gap-1 font-medium transition-colors",
      variant === "default" && "text-primary underline-offset-4 hover:underline",
      variant === "muted" && "text-muted-foreground hover:text-foreground",
      variant === "plain" && "text-foreground hover:text-primary",
      className
    )}
    {...props}
  />
));
Link.displayName = "Link";

export { Link };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge