Skip to main content
Hyperlinks to external URLs or internal document locations. 
<Link href="https://example.com">Visit website</Link>
<Link href="#section-1">Jump to Section 1</Link>

​
Props

PropTypeDescription
hrefstringURL or anchor reference
childrenReactNodeLink text
classNamestringTailwind classes
<Paragraph>
  Visit <Link href="https://example.com">our website</Link> for more info.
</Paragraph>

<Paragraph>
  Contact us at <Link href="mailto:[email protected]">[email protected]</Link>.
</Paragraph>
Supported protocols: http://, https://, mailto:, ftp://.
Use # to link to bookmarks within the document: 
<Paragraph>
  See <Link href="#introduction">Introduction</Link> for details.
</Paragraph>

​
Styling

<Link href="https://example.com" className="text-blue-600 underline">
  Styled link
</Link>

<Link href="#section" className="text-green-600 font-bold">
  Bold green link
</Link>

​
Bookmark

Create anchor points that internal links can target. 
<Bookmark name="introduction">
  <H1>Introduction</H1>
</Bookmark>

{/* Link to it */}
<Paragraph>
  Back to <Link href="#introduction">Introduction</Link>.
</Paragraph>

​
Bookmark props

PropTypeDescription
namestringAnchor identifier (used with #name)
childrenReactNodeContent to wrap

​
Headings as anchors

Headings with id prop automatically create bookmarks: 
<H1 id="chapter-1">Chapter 1</H1>

{/* Link to it */}
<Paragraph>
  See <Link href="#chapter-1">Chapter 1</Link>.
</Paragraph>
This is equivalent to: 
<Bookmark name="chapter-1">
  <H1>Chapter 1</H1>
</Bookmark>

​
Common patterns

<Paragraph className="mb-4">
  <Link href="#overview">Overview</Link> |
  <Link href="#features"> Features</Link> |
  <Link href="#contact"> Contact</Link>
</Paragraph>

​
References

<Paragraph>
  As discussed in <Link href="#methodology">Section 2</Link>, the methodology
  follows established practices<Link href="#ref-1">[1]</Link>.
</Paragraph>

<Section.Footer>
  <Paragraph className="text-center text-sm text-gray-500">
    <Link href="https://company.com">Company</Link> |
    <Link href="mailto:[email protected]"> Support</Link>
  </Paragraph>
</Section.Footer>