Link

free

Link gives anchors product focus styling and safe navigation behavior.

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

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Link

pnpm dlx nateui@latest add Link

yarn dlx nateui@latest add Link

Examples

Basic

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

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

export default function BasicDemo() {
  return (

External

Component gallery

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

export default function ExternalDemo() {

Custom Styles

Underlined Quiet

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

const links = [
  {

Router Adapter

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';

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'>;