Ouro HX

Navigation

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.

Skip to the recipe

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

See it live, no sign-in needed: Home · A recipe · Recipes

In its source: app/root.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo
npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/skip-link#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/skip-link

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/skip-link#v1.2.13 ourostack/ouro-ui/skip-link-tests#v1.2.13
import { SkipLink } from "@/components/ouro/skip-link/skip-link";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<body>
  <SkipLink />
  <Navbar label="Main" items={items} />
  <main id="main">…</main>
</body>

Usage

Render it as the first element in the page's body, before the header, and give the main content its id: <main id="main">.

Use instead when

  • Use Link instead for a link that shows all the time, and a table of contents of Links for jumps between sections of a long page.

Props

Type: SkipLinkProps.

children
Type: ReactNode
Default: "Skip to main content"
The link's text.
className
Type: string
Layout only: rarely needed, since the link places itself at the top of the screen. Appearance classes warn in development.
ref
Type: Ref<HTMLAnchorElement>
Reaches the rendered element.
target
Type: string
Default: "main"
The id of the element the link skips to, without #: the page's main content, <main id="main">. 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 #: <SkipLink target="main" />.
  • label: Not a prop. The link's text is its children: <SkipLink>Skip to recipes</SkipLink>.
  • to: Not a prop. SkipLink takes the id: <SkipLink target="main" />.

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.

Claim sources

Source on GitHubThis page as Markdown