A11y Starter

@interlace/ui — the three a11y primitives + the reduced-motion hook every consumer should install on day one.

a11yserveruiv1.7.3

A11y Starter — live renderstarters-a11y-starter--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/a11y-starter.json

With the @interlace alias

npx shadcn@latest add @interlace/a11y-starter

Behavior

What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.

Keyboard path

apps/storybook/src/stories/starters/A11yStarter.stories.tsx ↗

3 steps, 1 key press — replayed on every PR by the play function of Default. Axe cannot press a key, so this — not the a11y scan — is what proves the component is operable without a mouse.

1The skip link is the first tab stopTab
2Its target can actually RECEIVE focus
3The hidden text is in the accessibility tree

Runtime contract

packages/ui/vitest.config.ts ↗

Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.

Render boundary: server component
Renders during SSR / RSC with no hydration cost. It can be imported from a server component without pulling the page into the client.
Minimum viewport: none declared
No width floor: it takes the width it is given. Its container owns the layout question.
Coverage gate: not in the gate
The 100% gate currently covers src/charts/**/*.{ts,tsx} and src/lib/**/*.{ts,tsx} and src/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.ts and src/primitives/{alert,aspect-ratio,avatar,badge,box,breadcrumb,button,callout,card,checkbox,container,data-state,focus-ring,grade-badge,grid,input,label,meter,pagination,published-date,reading-time,section,section-boundary,separator,skip-link,stack,stat-strip,tag,textarea,typography,visually-hidden}.tsx. This file is outside it — the glob widens in phase 7.2.

History

This component is at v1.7.3, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

@interlace/ui 1.0.01 entry

Addedminor
Day-one install surfaces: three starter bundles that pull a curated set of items in one command, and the two library utilities every primitive needs.
Components

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Inherited from the preflight focus contract shipped in @interlace/theme.
Reduced motion: Animation is gated on prefers-reduced-motion.
ARIA in the source: None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: none
Registry dependencies: @interlace/skip-link
@interlace/visually-hidden
@interlace/focus-ring
@interlace/use-reduced-motion
@interlace/theme

Source

The full implementation — components/ui/INTERLACE-A11Y-STARTER.md once installed.

12 lines · TypeScript

# @interlace/a11y-starter

Installed:

- `SkipLink` — focus-visible skip-to-main link.
- `VisuallyHidden` — screen-reader-only span (component variant).
- `FocusRing` — composable WCAG 2.2 SC 2.4.13 focus contract.
- `useReducedMotion` — gates every animation in the DS.
- `theme` — full DS CSS baseline.

Docs: https://ds.interlace.tools/getting-started

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/a11y-starter.json