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.

foundationserverstylev1.9.0

Preview

Interlace Theme — live renderfoundations-theme--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/theme.json
With the @interlace alias
npx shadcn@latest add @interlace/theme

History

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.css now run at 200ms with no delay, and the reduced-motion class list in styles/tokens.css covers .animate-pulse. .animate-fade-in-up was 0.5s, .animate-slide-in-left 0.5s behind a 0.3s delay, and .animate-scale-in 0.4s behind a 0.2s delay — up to 800ms before the reader saw anything, against the 200ms entry ceiling MOTION_PHILOSOPHY.md has always set. All three are now 0.2s ease-out both. The delays were the worse half: an entry animation is already laid out at opacity: 0, so a delay is time spent looking at nothing. Separately, .animate-pulse — the animation Skeleton renders on every loading state — was missing from the tokens.css reduced-motion list, along with .animate-meteor and .animate-meteor-effect. The universal clamp in styles/preflight.css was already covering all three, so apps importing styles/index.css were never affected; apps that import tokens.css and theme.css à la carte and skip preflight.css were. All three are now listed. Both are held by packages/ui/__tests__/motion-contract-lock.test.ts, which reads the ceiling out of MOTION_PHILOSOPHY.md rather than repeating it, and fails if any bare animate-* utility in packages/ui/src is 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.brand with zero component edits, and the CSS baseline ships as one installable theme item — 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.

109 lines · TypeScript
/*
 * @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.