SkipLink

A keyboard user's first Tab from a cold load should reach the page's main content, not walk the whole nav first. SkipLink renders that link — clipped to a 1px box (the standard sr-only pattern, same as VisuallyHidden) so a sighted mouse user never sees it, and un-hides into a floating chip the moment it receives focus.

No Attio screen ships one to measure against — this is boilerplate accessibility furniture, not a design value the reference has an opinion on — so its focused chrome reuses already-measured crisp values throughout: the bgPopover floating surface and elevation.floating shadow (Menu/Popover/Toast's own pairing for "a surface above everything else"), and the canonical :focus-visible ring every other crisp control uses.

Installation

npm install @crisp-ui-kit/crisp

Usage

Render it as the very first thing on the page, before the sidebar or header, pointing at the page's main landmark:

import { SkipLink } from "@crisp-ui-kit/crisp";

function AppShell({ children }) {
  return (
    <>
      <SkipLink />
      <Sidebar />
      <main id="main-content">{children}</main>
    </>
  );
}

Props