All components
Skip Nav Link
An accessibility link that stays visually hidden until keyboard focus reveals it.
Install
zsh — skip-nav-link
1bunx stylexblocks add skip-nav-linkUsage — Base UI
skip-nav-link.tsx
12345678910111213import { SkipNavLink } from "#components/ui/base-ui/skip-nav-link.tsx";
export function Example() { return ( <> {/* first element in the page; reveals itself on keyboard focus */} <SkipNavLink href="#main">Skip to content</SkipNavLink> <main id="main">{/* page content */}</main> </> );}
// composition: <SkipNavLink render={<Link href="#main" />}>…</SkipNavLink>