Link

Next.js Only

Link is only compatible with Next.js.

Preview

'use client';

import { Link } from '@/registry/san-francisco/ui/link';

export default function LinkDemo() {
  return <Link href="#">Documentation</Link>;
}

Installation

bun

bunx shadcn@latest add @sft-ui/link

Variants

Default Muted Block

'use client';

import { Link } from '@/registry/san-francisco/ui/link';

export default function LinkDemoVariants() {
  return (
    <>
      <Link href="#" variant="default">
        Default
      </Link>
      <Link href="#" variant="muted">
        Muted
      </Link>
      <Link href="#" variant="block">
        Block
      </Link>
    </>
  );
}

Sizes

Small Default Large

'use client';

import { Link } from '@/registry/san-francisco/ui/link';

export default function LinkDemoSizes() {
  return (
    <>
      <Link href="#" size="sm">
        Small
      </Link>
      <Link href="#" size="default">
        Default
      </Link>
      <Link href="#" size="lg">
        Large
      </Link>
    </>
  );
}

External Links

External URLs automatically open in a new tab with rel="noopener noreferrer".

External Link

'use client';

import { Link } from '@/registry/san-francisco/ui/link';

export default function LinkDemoExternal() {
  return <Link href="https://example.com">External Link</Link>;
}

Props

Prop	Type	Default	Description
`variant`	`"default" \| "muted" \| "block"`	`"default"`	The visual style of the link.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	The text size of the link.
`href`	`string \| UrlObject`	—	The link destination. External URLs render as `<a>` tags.
`className`	`string`	—	Additional CSS classes to apply.

All Next.js Link props are supported for internal links.