# SkipLink The "Skip to main content" link a keyboard or screen-reader user meets first on every page, so one Tab and Enter jump past the header and navigation. It stays out of sight until it has focus, then shows at the top corner of the screen. It keeps `href="#main"` for pages without JavaScript; with it, the link moves focus to the target and scrolls it into view without adding a history entry, so Back still leaves the page. ```tsx import { SkipLink } from "@/components/ouro/skip-link/skip-link"; ``` ## Example ```tsx

…

``` ## Usage Render it as the first element in the page's body, before the header, and give the main content its id: `

`. ## Use instead when - Use `Link` instead for a link that shows all the time, and a table of contents of `Link`s for jumps between sections of a long page. ## Props Type: `SkipLinkProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `ReactNode` | `"Skip to main content"` | The link's text. | | `className` | `string` | | Layout only: rarely needed, since the link places itself at the top of the screen. Appearance classes warn in development. | | `ref` | `Ref` | | Reaches the rendered element. | | `target` | `string` | `"main"` | The `id` of the element the link skips to, without `#`: the page's main content, `

`. It need not be focusable; the link makes it take focus. | ## Native attributes Also accepts the attributes in React's `AnchorHTMLAttributes` and `HTMLAttributes` (`id`, `aria-*`, event handlers), passed to the rendered element, except those named on this page. ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `href`: Not a prop. SkipLink takes the id, without `#`: ``. - `label`: Not a prop. The link's text is its children: `Skip to recipes`. - `to`: Not a prop. SkipLink takes the id: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: SkipLink merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes] Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. [^layout-classes]: test:registry/ouro/components/ouro/skip-link/skip-link.test.tsx::SkipLink > forwards a ref and lets app layout classes win verify:testExists(registry/ouro/components/ouro/skip-link/skip-link.test.tsx::SkipLink > forwards a ref and lets app layout classes win)