Interlace Theme
@interlace/ui — full DS CSS baseline: tokens, foundation (type/spacing/radius), preflight (focus ring + min-viewport contract), shadcn↔fumadocs bridge, and brand palette.
Preview
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.
npx shadcn@latest add https://ds.interlace.tools/r/theme.jsonnpx shadcn@latest add @interlace/themeHistory
This component is at v1.9.0, 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.1.01 entry
- Changedpatch
The three entry animations in
styles/theme.cssnow run at 200ms with no delay, and the reduced-motion class list instyles/tokens.csscovers.animate-pulse..animate-fade-in-upwas 0.5s,.animate-slide-in-left0.5s behind a 0.3s delay, and.animate-scale-in0.4s behind a 0.2s delay — up to 800ms before the reader saw anything, against the 200ms entry ceilingMOTION_PHILOSOPHY.mdhas always set. All three are now0.2s ease-out both. The delays were the worse half: an entry animation is already laid out atopacity: 0, so a delay is time spent looking at nothing. Separately,.animate-pulse— the animationSkeletonrenders on every loading state — was missing from thetokens.cssreduced-motion list, along with.animate-meteorand.animate-meteor-effect. The universal clamp instyles/preflight.csswas already covering all three, so apps importingstyles/index.csswere never affected; apps that importtokens.cssandtheme.cssà la carte and skippreflight.csswere. All three are now listed. Both are held bypackages/ui/__tests__/motion-contract-lock.test.ts, which reads the ceiling out ofMOTION_PHILOSOPHY.mdrather than repeating it, and fails if any bareanimate-*utility inpackages/ui/srcis missing from the list.
@interlace/ui 1.0.01 entry
- Addedminor
The brand layer is forkable: the whole palette moved from Tailwind violet to the burnt-orange/green Interlace palette inside
@layer interlace.brandwith zero component edits, and the CSS baseline ships as one installablethemeitem — tokens, foundation, preflight (WCAG 2.2 SC 2.4.13 focus ring and the[data-min-viewport]contract), the shadcn↔fumadocs bridge, and the brand palette.
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
role="grid"
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
tw-animate-css
- Registry dependencies
- none
Source
The full implementation — styles/interlace/index.css once installed.
/*
* @interlace/ui — canonical CSS contract.
*
* THE single import a consumer app needs:
*
* @import "tailwindcss";
* @import "@interlace/ui/styles/index.css";
*
* That's the full DS baseline — type scale + spacing + radius + container
* widths + focus ring + min-viewport contract + fumadocs bridge + brand
* palette + every semantic token (--background / --foreground /
* --muted-foreground / --ring / ...) — wired into Tailwind v4 utilities.
*
* ─── Why a barrel + cascade layers ─────────────────────────────────
*
* Before this file existed, consumers had to know — and repeat in order —
* the five-file import chain (tokens → foundation → preflight → theme →
* interlace-theme). A typo or skipped file silently degraded half the
* contract (e.g. omitting preflight.css cost the WCAG 2.2 SC 2.4.13 focus
* ring). This barrel makes the contract a single line, and CSS Cascade
…89 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.