Marketing

Text Link

A quiet link that brightens on hover.

Preview

Install

pnpm dlx shadcn@latest add @abnormal/text-link

Brings inutilsradix-ui

Usage

import { ArrowRightIcon } from "lucide-react";
import { TextLink } from "@/components/ui/text-link";

export default function TextLinkDemo() {
  return (
    <TextLink href="#">
      Read the guide
      <ArrowRightIcon className="size-4" />
    </TextLink>
  );
}

Source

import * as React from "react";
import { Slot } from "radix-ui";
import { cn } from "@/lib/utils";

/** A quiet link with an optional trailing icon: gray text that brightens on hover. */
function TextLink({ className, asChild = false, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "a";
  return (
    <Comp
      data-slot="text-link"
      className={cn(
        "inline-flex cursor-pointer items-center gap-2 text-base/[1.6] font-medium text-muted-foreground transition-colors duration-150 hover:text-foreground",
        className,
      )}
      {...props}
    />
  );
}

export { TextLink };