An offscreen "skip to main content" link that becomes visible on keyboard focus so keyboard and screen-reader users can bypass repetitive navigation.
import SkipLink from "@/components/ui/skip-link";
export default function SkipLinkDemo() {
return (
<div className="relative flex h-screen w-full flex-col bg-background text-foreground">
<SkipLink>Skip to content</SkipLink>
<header className="flex items-center justify-between border-b border-border px-6 py-4">
<span className="text-sm font-semibold">laikit UI</span>
<nav
aria-label="Primary"
className="flex gap-4 text-sm text-muted-foreground"
>
<a href="#">Docs</a>
<a href="#">Components</a>
<a href="#">GitHub</a>
</nav>
</header>
<main
id="main-content"
tabIndex={-1}
className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center"
>
<p className="text-sm font-medium">Press Tab, then Enter</p>
<p className="max-w-sm text-sm text-muted-foreground">
Tabbing from the top of the page reveals the hidden skip link;
activating it jumps focus straight here, past the header navigation.
</p>
</main>
</div>
);
}