Link

Navigates to another page, section or resource.

Performing an action on this page: use Button.

Install

Terminal

pnpm dlx shadcn@latest add @acme/link

Or import from the package: import { Link } from '@acme/react'

Examples

Basic

Read the billing guide before changing your plan, or review WCAG 2.2 (opens in a new tab).

link-basic.tsx

import { Link } from '@/components/ui/link'

export default function LinkBasic() {
  return (
    <div className="flex max-w-prose flex-col gap-4 text-body">
      <p>
        Read the <Link href="#billing">billing guide</Link> before changing your plan, or{' '}
        <Link href="https://www.w3.org/TR/WCAG22/" external>
          review WCAG 2.2
        </Link>
        .
      </p>
      <nav aria-label="Footer" className="flex gap-4 text-body-sm">
        <Link href="#privacy" variant="standalone">
          Privacy
        </Link>
        <Link href="#terms" variant="standalone">
          Terms
        </Link>
      </nav>
    </div>
  )
}

Native

The same component for iOS (SwiftUI, AcmeUI) and Android (Jetpack Compose, com.acme.ui), built on each platform's own controls with the same tokens.

AcmeLink

Swift

AcmeLink("Billing guide", destination: URL(string: "https://example.com/billing")!)

A system Link: opens the browser or the matching app.

Link on iOS, light mode — iOS, light mode

Props

Link props
Prop	Type	Default	Description
variant	'inline' \| 'standalone' \| 'muted'	'inline'	inline links in body text are always underlined.
external	boolean	false	Opens in a new tab with rel="noopener noreferrer", shows an icon and announces "(opens in a new tab)".
render	ReactElement	—	Use a router link: render={<NextLink href="/docs" />}.

Keyboard
Key	Action
`Enter`	Follows the link

Role: link
You provide: Link text that makes sense out of context (not "click here").
Built in: Inline links are underlined so color is not the only cue (1.4.1).
WCAG 2.2 criteria: 1.4.1, 2.4.4, 2.4.7

Don’t

Use Link to trigger an action.
Remove the underline from links inside paragraphs.

Tokens

color.primary
color.foreground
color.muted-foreground
color.ring