Link

free

Link gives anchors product focus styling and safe navigation behavior.

Preview

Dark

import { PiArrowRight } from 'react-icons/pi'
import Link from '@/components/ui/Link';

export default function UsageDemo() {
  return (
    <div className="flex justify-center">
      <Link
        href="/components/ui/button"
        className="inline-flex items-center gap-2 font-medium transition-colors"
      >
        Browse Button docs
        <PiArrowRight className="text-base" />
      </Link>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Link

Examples

Basic

Preview

Dark

Pair Button with Input when a form needs a clear submit action.

import Link from '@/components/ui/Link';

export default function BasicDemo() {
  return (
    <div className="max-w-md space-y-4 text-sm text-foreground">
      <p>
        Pair <Link href="/components/ui/button" className="font-medium underline underline-offset-4 hover:text-primary-hover">Button</Link> with{' '}
        <Link href="/components/ui/input" className="font-medium underline underline-offset-4 hover:text-primary-hover">Input</Link> when a form needs a clear submit action.
      </p>
    </div>
  );
}

External

Preview

Dark

Component gallery

import { PiArrowSquareOut } from 'react-icons/pi'
import Link from '@/components/ui/Link';

export default function ExternalDemo() {
  return (
    <div className="inline-flex flex-col items-start gap-4">
      <Link
        href="https://nateui.com/components"
        target="_blank"
        rel="noreferrer"
        className="inline-flex items-center gap-2 font-medium text-foreground underline underline-offset-4 transition-colors hover:text-primary"
      >
        Component gallery
        <PiArrowSquareOut className="text-base text-muted-foreground" />
      </Link>
    </div>
  );
}

Custom Styles

Preview

Dark

Underlined Quiet

import Link from '@/components/ui/Link';

const links = [
  {
    label: 'Underlined',
    href: '/components/ui/dialog',
    className: 'text-foreground underline underline-offset-4',
  },
  {
    label: 'Quiet',
    href: '/components/ui/drawer',
    className: 'text-muted-foreground hover:text-foreground',
  },
];

export default function CustomStylesDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      {links.map((item) => (
        <Link
          key={item.href}
          href={item.href}
          className={`font-medium transition-colors ${item.className}`}
        >
          {item.label}
        </Link>
      ))}
    </div>
  );
}

Router Adapter

Preview

Dark

Open Dropdown docs

import NextLink from 'next/link';
import type { ComponentPropsWithRef } from 'react';
import { PiArrowRight } from 'react-icons/pi'
import Link from '@/components/ui/Link';

type RouterLinkProps = ComponentPropsWithRef<'a'> & {
  href: string;
};

const RouterLink = ({ href, ...props }: RouterLinkProps) => (
  <NextLink href={href} {...props} />
);

export default function RouterAdapterDemo() {
  return (
    <div className="flex justify-center">
      <Link
        render={RouterLink}
        href="/components/ui/dropdown"
        className="inline-flex items-center gap-2 rounded-control border border-border px-4 py-2 font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
      >
        Open Dropdown docs
        <PiArrowRight className="text-base text-muted-foreground" />
      </Link>
    </div>
  );
}

API

Link renders an anchor by default. Use render when the anchor props should be handed to a router component instead.

Prop	Description	Type	Default
`children`	Link label or custom inline content.	`ReactNode`	-
`className`	Class names applied to the rendered link. The component always adds its focus-visible ring classes.	`string`	-
`href`	Destination URL. Required and forwarded to the rendered element.	`string`	-
`ref`	Ref forwarded to the rendered anchor or adapter component.	`Ref<HTMLAnchorElement>`	-
`rel`	Relationship attribute. When omitted with `target="_blank"`, Link supplies `noopener noreferrer`.	`string`	Auto for blank targets
`render`	Element or component used instead of the default `<a>` tag. Receives the resolved link props.	`LinkRenderer`	-
`target`	Native anchor target, such as `_blank`.	`HTMLAttributeAnchorTarget`	-
`...nativeProps`	Native anchor props forwarded to the rendered element, excluding `href`.	`NativeAnchorProps`	-

Types

type LinkRenderer = ElementType<LinkRenderProps>;
 
type LinkRenderProps = NativeAnchorProps & {
  href: string;
};
 
type NativeAnchorProps = Omit<ComponentPropsWithRef<'a'>, 'href'>;