# Skip link (goodtabs UI)

A skip to content link, hidden until focused, then a primary pill at the top left.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/skip-link.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/skip-link`

## Usage

```tsx
import { SkipLink } from "@/components/ui/skip-link"

<body>
  <SkipLink href="#content" />
  <Header />
  <main id="content" tabIndex={-1}>...</main>
</body>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| href | `string` | `"#content"` | The id of the main content, with the hash. |
| children | `ReactNode` | `"Skip to content"` | Link text. |
| forceVisible | `boolean` | `false` | Shows the pill in normal flow without focus. Docs and previews only. |

## When to use

- On every page with a header or sidebar before the main content
- As the first focusable element in the body, before the logo
- In app shells where the sidebar has many links

## When not to use

- On a page where the main content is already the first thing in the tab order
- As an in-page table of contents: it skips one block, it is not navigation
- With forceVisible in production: that prop is for docs and previews

## Notes for agents

- Put it first in the body and give the target an id plus tabIndex={-1} so focus lands there in every browser
- When focused it is absolutely positioned at the top left of the nearest positioned ancestor, so leave the body unpositioned
- forceVisible renders the pill in normal flow for previews only; the real link is sr-only until focused
- It is a plain anchor, not next/link, because it targets an id on the same page

Docs: https://ui.goodtabs.co/components/skip-link