Settings Template
Account / app settings surface. Topbar + left tab-rail (sections) + main content area (rendered section). Server-friendly; the active section is driven by the consumer's routing (each section is a route).
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/settings-template.jsonnpx shadcn@latest add @interlace/settings-templateBehavior
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.
Measured contrast
packages/ui/__tests__/theme-contract-lock.test.ts ↗Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is muted-foreground on muted at 7.34:1 (harbor · light), against a floor of 4.5:1.
| Pair | interlacelight | interlacedark | harborlight | harbordark | Floor |
|---|---|---|---|---|---|
| muted-foreground on mutedcopy on a muted surface | 8.81:1 | 10.48:1 | 7.34:1 | 8.64:1 | 4.5:1SC 1.4.3 |
| muted-foreground on backgroundsecondary copy | 9.41:1 | 11.32:1 | 7.82:1 | 9.52:1 | 4.5:1SC 1.4.3 |
| muted-foreground on cardsecondary copy in a card | 9.41:1 | 10.48:1 | 8.25:1 | 8.64:1 | 4.5:1SC 1.4.3 |
| foreground on backgroundbody copy | 19.65:1 | 16.97:1 | 17.74:1 | 16.19:1 | 4.5:1SC 1.4.3 |
Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.
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 componentRenders during SSR / RSC with no hydration cost. It can be imported from a server component without pulling the page into the client.
- Minimum viewport
MIN_VIEWPORT = 480Declared, not assumed. Below 480 CSS px the preflight contract draws a dev-mode outline — how to switch it on.
- Coverage gate
not in the gateThe 100% gate currently covers
src/charts/**/*.{ts,tsx}andsrc/lib/**/*.{ts,tsx}andsrc/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.tsandsrc/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.1.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.0.01 entry
- Addedminor
The five-layer architecture lands: primitives → patterns → charts → templates, with
SectionBoundaryas the composition seam and thirteen full-page templates installable as registry blocks.Components- @interlace/section-boundary
- @interlace/article-template
- @interlace/auth-template
- @interlace/author-template
- @interlace/blog-home-template
- @interlace/dashboard-template
- @interlace/docs-page-template
- @interlace/error-template
- @interlace/landing-template
- @interlace/registry-item-template
- @interlace/scorecard-template
- @interlace/stats-template
- @interlace/tag-template
Import
2 named exports — pull the parts you need.
import { MIN_VIEWPORT, SettingsTemplate } from '@/components/ui/templates/settings-template';API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
SettingsTemplateProps
Also accepts every <div> attribute.
| Prop | Type | Description |
|---|---|---|
| topbar* | React.ComponentProps<typeof Topbar> | — |
| title | React.ReactNode | Page title (rendered above the tab rail). |
| sections* | SettingsSection[] | Section list shown in the rail. |
| activeSection* | string | ID of the currently-active section (matches `SettingsSection.id`). |
| children* | React.ReactNode | Main content (the active section's form / settings). |
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
role="status"aria-busyaria-currentaria-label
Examples
1 more state from the same story file.
Minimum viewport
This primitive declares MIN_VIEWPORT = 480 CSS px (DESIGN_PRINCIPLES #14). When mounted in a container narrower than this, the preflight contract draws a dev-mode outline so the regression is visible during local development.
<body data-interlace-dev>...</body>
Add the data-interlace-dev attribute to the body in development builds only — preflight then outlines any primitive whose container is below its declared data-min-viewport.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
Source
The full implementation — components/ui/templates/settings-template.tsx once installed.
import * as React from 'react';
// @interlace/settings-template v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/settings-template
// What changed since: https://ds.interlace.tools/c/settings-template#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — SettingsTemplate
*
* Account / app settings surface. Topbar + left tab-rail (sections) +
* main content area (rendered section). Server-friendly; the active
* section is driven by the consumer's routing (each section is a route).
*
* ## MIN_VIEWPORT — 480
*
* Below 480, the tab-rail becomes a horizontal scrolling row above the
* content.
*/
…153 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.