{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "interlace-ui", "homepage": "https://ds.interlace.tools", "items": [ { "name": "theme", "type": "registry:style", "title": "Interlace Theme", "description": "@interlace/ui — full DS CSS baseline: tokens, foundation (type/spacing/radius), preflight (focus ring + min-viewport contract), shadcn↔fumadocs bridge, and brand palette.", "categories": [ "foundation", "theme" ], "meta": { "tier": "theme", "client": false, "minViewport": null, "loading": false, "version": "1.8.0", "since": "1.0.0" } }, { "name": "a11y-starter", "type": "registry:ui", "title": "A11y Starter", "description": "@interlace/ui — the three a11y primitives + the reduced-motion hook every consumer should install on day one.", "categories": [ "a11y", "starter" ], "meta": { "tier": "starter", "client": false, "minViewport": null, "loading": false, "version": "1.7.3", "since": "1.0.0" } }, { "name": "layout-starter", "type": "registry:ui", "title": "Layout Starter", "description": "@interlace/ui — the six layout primitives that compose every page. One install, the LAYOUT_PHILOSOPHY contract is satisfied.", "categories": [ "foundation", "starter" ], "meta": { "tier": "starter", "client": false, "minViewport": null, "loading": false, "version": "1.7.3", "since": "1.0.0" } }, { "name": "mdx-starter", "type": "registry:ui", "title": "MDX Starter", "description": "@interlace/ui — the components most MDX pipelines need (Callout, Prose, CodeBlock, Tag), wired through a default mdx-components.tsx.", "categories": [ "blog", "starter" ], "meta": { "tier": "starter", "client": false, "minViewport": null, "loading": false, "version": "1.7.3", "since": "1.0.0" } }, { "name": "cn", "type": "registry:lib", "title": "cn — class-name merge utility", "description": "@interlace/ui — the cn() helper, alias-compatible with shadcn. Merges Tailwind class lists deterministically.", "categories": [ "foundation", "util" ], "meta": { "tier": "util", "client": false, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "use-reduced-motion", "type": "registry:lib", "title": "useReducedMotion hook", "description": "@interlace/ui — the `useReducedMotion` hook every interactive primitive uses to gate animations on the user's OS preference.", "categories": [ "foundation", "util" ], "meta": { "tier": "util", "client": true, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "theme-tokens", "type": "registry:lib", "title": "Theme token manifest", "description": "@interlace/ui — the registry of themes and the list of every `--interlace-*` token a theme must define. A missing token does not throw; it silently inherits the previous theme's value.", "categories": [ "foundation", "util" ], "meta": { "tier": "util", "client": false, "minViewport": null, "loading": false, "version": "1.0.0", "since": "1.0.0" } }, { "name": "use-theme", "type": "registry:lib", "title": "useTheme hook", "description": "@interlace/ui — reads and writes the theme (`data-theme`) and colour scheme (`.dark`) axes, persists to localStorage, and follows the OS when no preference is stored.", "categories": [ "foundation", "util" ], "meta": { "tier": "util", "client": true, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "theme-script", "type": "registry:lib", "title": "No-flash theme bootstrap script", "description": "@interlace/ui — the inline `` script that applies the stored theme before first paint. Without it every page load flashes the default theme.", "categories": [ "foundation", "util" ], "meta": { "tier": "util", "client": false, "minViewport": null, "loading": false, "version": "1.0.1", "since": "1.0.0" } }, { "name": "accordion", "type": "registry:ui", "title": "Accordion", "description": "A disclosure stack: a column of headers whose panels open and close. Wraps @base-ui/react/accordion — Base UI owns the open state (single or multiple), the keyboard model and every piece of the accordion ARIA.", "categories": [ "navigation", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.2.0", "since": "1.0.0" } }, { "name": "alert-dialog", "type": "registry:ui", "title": "Alert Dialog", "description": "A modal confirmation dialog for *destructive or otherwise consequential* actions (\"Delete project\", \"Sign out everywhere\"). Distinct from `Dialog`: the underlying Base UI primitive disables outside-click and Escape-only dismissal so the user MUST…", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "A bordered in-page message with `role=\"alert\"`, an optional leading icon, a title and a description, in two tones (default and destructive).", "categories": [ "feedback", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "aspect-ratio", "type": "registry:ui", "title": "Aspect Ratio", "description": "A single block-level wrapper that reserves space by ratio (CSS `aspect-ratio`) and stretches to the parent's width. Use it as the *frame* for media that arrives async — images, video, embeds, charts — so the surrounding layout never shifts…", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "A circular image with a text fallback. Wraps @base-ui/react/avatar: Base UI owns the image load/error state machine that decides when the fallback shows, and we own the surface.", "categories": [ "data", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": null, "loading": true, "version": "1.2.0", "since": "1.0.0" } }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "A small pill for a status, a count, a label or a tag. Renders a `` by default, or whatever Base UI's `render` prop is given, so the same badge can be an anchor without losing its shape.", "categories": [ "feedback", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": true, "version": "1.3.0", "since": "1.0.0" } }, { "name": "box", "type": "registry:ui", "title": "Box", "description": "The lowest-altitude layout primitive: surface + box-model on one element. Mirrors MUI `` (a polymorphic, unopinionated wrapper) minus the `sx` CSS-in-JS prop — Interlace uses a curated, tokenized cva variant set instead, so it cannot reopen the…", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "breadcrumb", "type": "registry:ui", "title": "Breadcrumb", "description": "A server-rendered, semantically-tagged trail of ancestor links. The compositional API mirrors the shadcn surface so consumers swap drop-in, and `BreadcrumbLink` keeps a server-safe `asChild` seam (`React.cloneElement`, NOT Base UI `useRender`) so the whole…", "categories": [ "navigation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 480, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "button-variants", "type": "registry:ui", "title": "Button Variants", "description": "The cva variant map that `button.tsx` imports — variant × size class strings and nothing else. Pure CVA: no React, no client APIs, so a server component can style a plain `` with `buttonVariants({ variant, size })`.", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.3.0", "since": "1.0.0" } }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "The minimal-surface counterpart to [dialog.tsx](./dialog.tsx). Where Dialog exercises compound composition + portal + focus, Button exercises the variant + render-prop polymorphism + native-event passthrough surface.", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": null, "loading": false, "version": "1.3.0", "since": "1.0.0" } }, { "name": "callout", "type": "registry:ui", "title": "Callout", "description": "Inline-prose annotation. The \"stop and read this\" surface that punctuates long-form content (docs, MDX, READMEs). Distinct from `Alert` — Alert is an out-of-band runtime banner (\"your save failed\"), Callout is an in-band authored aside (\"note: this rule is…", "categories": [ "blog", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.0.0", "since": "1.0.0" } }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "A bordered, rounded content surface with header / title / description / action / content / footer parts. The surface, radius and border come from `Box`; the card owns only its column layout, its padding and its shadow.", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": true, "version": "1.2.0", "since": "1.0.0" } }, { "name": "checkbox", "type": "registry:ui", "title": "Checkbox", "description": "Tri-state boolean form control (checked / unchecked / indeterminate). Built on @base-ui/react/checkbox: Base UI owns `role=\"checkbox\"`, `aria-checked=\"mixed\"`, Space activation, and the controlled/uncontrolled pair (`checked` + `onCheckedChange` /…", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "code-block", "type": "registry:ui", "title": "Code Block", "description": "Fenced code block with a title bar (title left, language tag + copy button right). The copy action shells out to `navigator.clipboard.writeText` and flips an inline \"Copied!\" affordance for 1.5s — the only piece of state this primitive owns. Everything…", "categories": [ "blog", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": true, "version": "1.1.0", "since": "1.0.0" } }, { "name": "collapsible", "type": "registry:ui", "title": "Collapsible", "description": "A single open/close disclosure surface. Wraps Base UI's `Collapsible.Root`, `Collapsible.Trigger`, `Collapsible.Panel` so consumers get the controlled / uncontrolled state machine, ARIA wiring (`aria-controls`, `aria-expanded`, `id`), keyboard semantics…", "categories": [ "navigation", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.0.0", "since": "1.0.0" } }, { "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A text input that filters a list. Built on `@base-ui/react/combobox`: Base UI owns the filtering (`Intl.Collator`-backed `useFilter`), the combobox/listbox ARIA pairing, VIRTUAL focus (the input keeps DOM focus and `aria-activedescendant` moves), single +…", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.0.0", "since": "1.1.0" } }, { "name": "command-palette", "type": "registry:ui", "title": "Command Palette", "description": "⌘K. A modal surface holding one filterable list of actions.", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.0.0", "since": "1.1.0" } }, { "name": "container", "type": "registry:ui", "title": "Container", "description": "The width contract from LAYOUT_PHILOSOPHY.md §2: four sizes only, each mapped to one fixed max-width, plus the responsive horizontal padding scale `px-4 sm:px-6 lg:px-8` (§5).", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "context-menu", "type": "registry:ui", "title": "Context Menu", "description": "Right-click / long-press menu. Wraps `@base-ui/react/context-menu` (same Menu compositional API as DropdownMenu, just with a Root that handles right-click / long-press / Shift+F10 as the open gesture).", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "data-state-model", "type": "registry:ui", "title": "Data State Model", "description": "Nothing in this file imports React, touches the DOM, or renders anything. It is the part of the absence contract that can be *proved* — the union, the precedence order, the announcement each state owes a screen reader, and the class set that paints it — so…", "categories": [ "feedback", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": true, "version": "1.0.0", "since": "1.1.0" } }, { "name": "data-state", "type": "registry:ui", "title": "Data State", "description": "The single conditional swap point for a data surface, and the place the design system says what an ABSENCE is.", "categories": [ "feedback", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A MODAL dialog: it traps focus, dismisses on Escape and on an outside click, marks the rest of the page inert while open, and restores focus to the trigger on close. Base UI owns all of that, which is exactly why this file never says so anywhere else — and…", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.4.0", "since": "1.0.0" } }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown Menu", "description": "A button-triggered command menu — items, checkbox and radio items, submenus, plus a `Compose` array shorthand. Wraps @base-ui/react/menu: Base UI owns open state, positioning, focus and typeahead; we own the popup and the rows.", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.3.0", "since": "1.0.0" } }, { "name": "focus-ring", "type": "registry:ui", "title": "Focus Ring", "description": "A `` that paints the DS focus ring when anything inside it takes focus — `focus-within` on the wrapper, not `focus-visible` on the child.", "categories": [ "a11y", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.2.0", "since": "1.0.0" } }, { "name": "form", "type": "registry:ui", "title": "Form", "description": "A composition primitive over `@base-ui/react/field`. The form ecosystem owns a long tail of subtle a11y wiring — label/control association via generated ids, `aria-describedby` for description + error, `aria-invalid` flipping on validity, focus management…", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "grade-badge", "type": "registry:ui", "title": "Grade Badge", "description": "Visual grade pill — A+ / A / A- / B+ / B / … / F. The atomic surface for scorecard pages: a single chip that announces a tier without making the reader compute. Five tones (excellent/good/fair/poor/fail) map onto the 13-grade ladder so the colour story…", "categories": [ "feedback", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "grid", "type": "registry:ui", "title": "Grid", "description": "The 2-D sibling of Stack: a thin, token-bound CSS-grid primitive, not a grid framework. `` sets the column track and gap on the foundation `--spacing` scale; `` spans columns, responsively. Two FLAT components rather than one with a `kind…", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "hover-card", "type": "registry:ui", "title": "Hover Card", "description": "A rich, non-modal overlay that opens on pointer-hover (and keyboard focus) of its trigger, used to preview the *contents* of a target — author cards, repo cards, link previews. Distinct from `Tooltip` (short, one-line, no interactive content) and `Popover`…", "categories": [ "overlay", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 768, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Single-line text input. A pure surface primitive with no controlled-state machinery: the native `` already owns selection, IME, undo/redo and `onChange`, so we add structure (surface, border, focus + invalid rings) without wrapping a single native…", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "label", "type": "registry:ui", "title": "Label", "description": "Form-control label. No headless dep — Base UI's `Field.Label` is the forms-aware variant (see `form.tsx`); this is the lower-level shadcn-canon label for controls that own their own id wiring. Server component. Mirrors…", "categories": [ "foundation", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "meteors", "type": "registry:ui", "title": "Meteors", "description": "Aceternity-style falling-meteor effect with per-meteor variety: viewport- distributed origins (some above the fold), trail lengths randomized between 50–140px, opacities 0.45–1.0, durations 3–9s. The variety is the difference between \"meteors\" and \"looks…", "categories": [ "decorative", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": null, "loading": false, "version": "1.2.0", "since": "1.0.0" } }, { "name": "meter-scale", "type": "registry:ui", "title": "Meter Scale", "description": "The maths behind `Meter` and `RankedBarList`. No React, no DOM — the same split `charts/scale.ts` makes, and for the same reason: a bar that draws a beautiful wrong length is worse than one that fails to render, and the length is the part that can be…", "categories": [ "data", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": null, "loading": false, "version": "1.0.0", "since": "1.1.0" } }, { "name": "meter", "type": "registry:ui", "title": "Meter", "description": "ONE inline bar, absorbing three that were hand-rolled separately across the phase-10 corpus: an odds bar, a score meter and a reviewer bar. They differed in tone and in what the denominator meant; they did not differ in anything that justified three…", "categories": [ "data", "primitive" ], "meta": { "tier": "primitive", "client": false, "minViewport": 320, "loading": true, "version": "1.0.0", "since": "1.1.0" } }, { "name": "number-field", "type": "registry:ui", "title": "Number Field", "description": "A numeric input with increment/decrement controls and built-in scrubbing. Wraps @base-ui/react/number-field. Re-exports the compositional parts (Root, Group, Increment, Input, Decrement, ScrubArea) under DS-styled wrappers without owning state.", "categories": [ "form", "primitive" ], "meta": { "tier": "primitive", "client": true, "minViewport": 320, "loading": false, "version": "1.1.0", "since": "1.0.0" } }, { "name": "pagination", "type": "registry:ui", "title": "Pagination", "description": "The page-navigation bar: a `