"Skip to content" — the first thing in the tab order, hidden until it has focus.
Import it from rei-kit/web:
import { SkipLink } from 'rei-kit/web'
Open SkipLink in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { SkipLink } from 'rei-kit/web'
</script>
<template>
<!-- First in the tab order, and invisible until it has focus. Press Tab. -->
<div>
<SkipLink for="example-main" label="Skip to content" />
<nav class="mb-3 flex gap-3" aria-label="Sections">
<a href="#a" class="text-ink-soft text-sm">Products</a>
<a href="#b" class="text-ink-soft text-sm">Pricing</a>
<a href="#c" class="text-ink-soft text-sm">Docs</a>
</nav>
<main id="example-main" class="text-ink text-sm">The content the link skips to.</main>
</div>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
for | string | yes | The `id` of what to skip to, usually the page's `<main>`. Without the `#`. |
label | string | yes | What it says, e.g. "İçeriğe geç". Already translated. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.