Text Link

Inline link with a sliding underline.

Text effectsServer-safe

Read the installation guide or view the source.

Install

bash

npx @agents-npm-packages/vibeui add text-link --dir ./src/components/ui

Import

tsx

import { TextLink } from "@/components/ui/text-link"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<TextLink>

Prop	Type	Default	Description
href*	string	—	Link destination.
children*	ReactNode	—	Content rendered inside the component.
className	string	—	Extra classes, merged with the component's own.
external	boolean	—	Opens in a new tab with rel=noreferrer.

Source

src/components/ui/text-link.tsx

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

/** Inline link with a sliding underline. */
export function TextLink({
  href,
  children,
  className,
  external,
}: {
  href: string;
  children: React.ReactNode;
  className?: string;
  external?: boolean;
}) {
  return (
    <a
      href={href}
      className={cn(
        "font-medium text-ink underline decoration-line-strong decoration-1 underline-offset-[5px] transition-[text-decoration-color,color] duration-200 hover:text-accent hover:decoration-accent",
        className,
      )}
      {...(external ? { target: "_blank", rel: "noreferrer" } : {})}
    >
      {children}
    </a>
  );
}

Exports TextLink. Peer dependencies: clsx, tailwind-merge.