Component

Skip to Content

An accessible “skip link” that lets keyboard and screen-reader users jump past navigation straight to the main content. Visually hidden until focused.

Default

Renders an anchor to #main-content that becomes visible on keyboard focus.

The link is visually hidden until focused. Press Tab inside this card to reveal it.

Page chrome (nav, header, etc.)

#main-content — the focus target.

Installation

$pnpm add @refraction-ui/react-skip-to-content

Usage

tsx

import { SkipToContent } from '@refraction-ui/react'

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <SkipToContent targetId="main-content" />
      <nav>{/* ... */}</nav>
      <main id="main-content">{children}</main>
    </>
  )
}

Custom target & label

Use targetId and custom children to point at any region of the page.

Point at any element id with targetId and override the label.

Skip to article

Sidebar / table of contents

#article-body

Props

Accepts all native <a> attributes in addition to the props below.

Prop	Type	Default	Description
`targetId`	`string`	`'main-content'`	The id of the element to skip to (without the leading #).
`children`	`React.ReactNode`	`'Skip to content'`	The visible label shown when the link receives focus.
`className`	`string`	--	Additional CSS classes to apply.