Layout Starter

@interlace/ui — the six layout primitives that compose every page. One install, the LAYOUT_PHILOSOPHY contract is satisfied.

foundationserveruiv1.7.3

Layout Starter — live renderstarters-layout-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/layout-starter.json

With the @interlace alias

npx shadcn@latest add @interlace/layout-starter

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): Not focusable — no focus indicator required.
Reduced motion: No animation to gate.
ARIA in the source: None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

1 more state from the same story file.

plainstarters-layout-starter--plain ↗

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: none
Registry dependencies: @interlace/container
@interlace/section
@interlace/stack
@interlace/grid
@interlace/box
@interlace/typography
@interlace/theme

Source

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

14 lines · TypeScript

# @interlace/layout-starter

Installed:

- `Container` — 4 width tiers (prose / content / wide / full).
- `Section` — vertical-rhythm slabs.
- `Stack` + `Cluster` — six-step gap scale.
- `Grid` — responsive grid primitive.
- `Box` — token-aware surface (background + padding + radius + border).
- `Typography` — h1..h6, body, long, ui, ui-sm, caption, code variants.
- `theme` — full DS CSS baseline.

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

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/layout-starter.json