Main

A focusable <main> landmark for the page's primary content. Renders with id="main" and tabIndex={-1} so a skip link (or any programmatic focus call) can send keyboard users directly to the main content without exposing a visible focus ring on the region itself.

Pair with the SkipToMainLink component at the top of the document.

A page has one main landmark, and this docs page already renders it around the content you are reading. A live example here would render a second one, so the page shows the markup instead:

1import { Main } from "@ngrok/mantle/main";2 3<Main>⋯4	<h1 className="text-lg font-medium">Page title</h1>5	<p className="text-sm text-muted">Primary page content goes here.</p>6</Main>;

API Reference

Main

Renders a <main> element with id="main", tabIndex={-1}, and focus:outline-hidden. Accepts all standard <main> HTML attributes except id and tabIndex: SkipToMainLink targets #main and focuses it, so Main stamps both. Additional class names passed via className are merged with the defaults.