Slotted

Slotted is a UI library for dense, product-oriented web applications, with idiomatic React and Angular bindings over shared specifications, accessibility contracts, tokens and behavior.

The packages are a 0.x public beta on npm. The public API changes between beta releases without deprecation.

• Two native bindings. React and Angular components, each written the way its framework expects, over one contract per family in specs/components/ (125 families).
• Accessibility by contract. Each family states its ARIA pattern, roles, keyboard table and focus model, and a test verifies the contract.
• Themes as data. Tokens, schemes (light, dark, high contrast) and densities come from a theme module; every rule ships in the slotted cascade layer, so application CSS overrides it without specificity fights.
• Internationalization. One message catalog with ICU plurals; en-US is built in and pt-BR ships as a catalog.

Packages

Package	Content
@slotted/react	React components, one subpath per family, and @slotted/react/styles.css.
@slotted/angular	Angular components, one secondary entry point per family.
@slotted/core	Framework-independent behavior, formatting and i18n catalogs.
@slotted/theme	The theme contract, defineTheme, extendTheme and the slotted-build-theme CLI.
@slotted/themes	Prebuilt themes: @slotted/themes/default.css.
@slotted/styles	Per-family stylesheets, bundled by both bindings; not installed directly.

Quick start

React

npm install @slotted/react @slotted/core @slotted/theme @slotted/themes

import '@slotted/themes/default.css';
import '@slotted/react/button/styles.css';
import { Button } from '@slotted/react/button';

export function Actions() {
  return <Button>Save</Button>;
}

Angular

npm install @slotted/angular @slotted/core @slotted/theme @slotted/themes

/* styles.css */
@import '@slotted/themes/default.css';

import { Component } from '@angular/core';
import { SlButton } from '@slotted/angular/button';

@Component({
  imports: [SlButton],
  template: `<button slButton>Save</button>`,
})
export class Actions {}

Each package README holds its full setup. docs/styling.md holds the cascade layer order and the override rules.

Repository

Directory	Content
packages/	The six published packages.
specs/	The public contract of each family and the test that verifies it.
apps/	The documentation site and the React and Angular Storybooks.
demos/	Nexora, a reference application that consumes the published packages.
tools/	Unpublished workspace tooling: agent docs, the visual harness, Storybook.
docs/	Design law, decisions, product context and the build order.

Development

Requires Node.js 24 and pnpm 11.24.0.

corepack enable
corepack install --global pnpm@11.24.0
pnpm install --frozen-lockfile
pnpm build
pnpm check

pnpm dev starts both Storybooks: React on 6006, Angular on 6007. CONTRIBUTING.md holds the generated artifacts, the beta channel, publishing and the validation commands; docs/README.md indexes every document; the PRD holds the product context. Every tracked file and commit message is written in en-US (pnpm test:language).

License

MIT