Headless, signals-first UI primitives with first-class Angular Forms support.

Radix NG is a low-level UI primitive library for Angular with a focus on accessibility, customization, and developer experience. The primitives are headless — they ship no styles and expose state via data-* attributes, so you can use them as the base layer of your design system or adopt them incrementally.

The library grew out of an Angular port of Radix UI; its API and behavior now align primarily with Base UI.

• 🎯 Headless — no styles, full control. State is exposed through data-* attributes.
• ♿ Accessible — built to the WAI-ARIA authoring practices, with keyboard navigation and focus management.
• ⚡ Signals-first — modern Angular API (input(), model(), computed(), signal()).
• 📝 Angular-native forms — the same controls and Field anatomy work with Reactive Forms, ngModel, and Signal Forms.
• 🧩 Composable — primitives compose via hostDirectives and shared building blocks.
• 🌗 Theme-ready — state-driven styling works with light/dark and any design tokens.
• 📦 Tree-shakeable — granular secondary entry points (@radix-ng/primitives/<name>).
• 🤖 AI-ready — installable Skills teach AI coding assistants the APIs, examples, and data-* styling contract.

ng add @radix-ng/primitives

The schematic installs the runtime peer dependencies and can add AI assistant instructions (AGENTS.md / CLAUDE.md) to your workspace. Or install manually:

npm install @radix-ng/primitives @floating-ui/dom @internationalized/date @internationalized/number

import { Component } from '@angular/core';
import {
  RdxCollapsibleRootDirective,
  RdxCollapsibleTriggerDirective,
  RdxCollapsiblePanelDirective
} from '@radix-ng/primitives/collapsible';

@Component({
  selector: 'app-demo',
  imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsiblePanelDirective],
  template: `
    <div rdxCollapsibleRoot>
      <button rdxCollapsibleTrigger>Toggle</button>
      <div rdxCollapsiblePanel>Content</div>
    </div>
  `
})
export class DemoComponent {}

Primitives are headless: style them via the data-* attributes they expose (e.g. [data-open], [data-disabled]) with the tooling of your choice.

Angular remains the source of truth for values, validation, submission, and reset. Radix NG connects that state to the same headless controls, accessible Field parts, and data-* styling contract on every form path:

<!-- Reactive Forms and ngModel use the Angular Forms adapter. -->
<input rdxInput formControlName="email" rdxNgControlField />

<!-- Signal Forms uses the structural field adapter. -->
<input rdxInput [formField]="accountForm.email" rdxSignalField />

Existing ControlValueAccessors stay available for Reactive and template-driven forms. The optional @radix-ng/primitives/signal-forms entry adds Angular Signal Forms without introducing a parallel Radix NG form model. Signal Forms is stable in Angular 22; the Reactive and template-driven paths remain supported on Angular 21 and 22. See the paired recipes and executable control matrix, or the migration guide when upgrading from 1.0.10.

• 📖 radix-ng.com — documentation, examples & API reference (Storybook)
• 📄 radix-ng.com/llms.txt — docs for LLMs (full text at /llms-full.txt)
• 🤖 AI assistant skills — for Claude Code, Cursor, Copilot, and others
• 🎙 The Story of My Radix UI Port for Angular — talk, FrontendConf Moscow 2025

Give your AI coding assistant structured knowledge of the primitives — the machine-readable API contract (selectors, inputs/outputs, two-way bindings), working examples, the data-* styling contract, and a list of common mistakes — so it writes correct, accessible code instead of guessing. The Skills are self-contained (everything bundled offline) and work with Claude Code, Cursor, Codex, Cline, Windsurf, GitHub Copilot, Gemini, and other agents via the open Agent Skills ecosystem.

npx skills add radix-ng/primitives/skills

ng add @radix-ng/primitives also offers to add a Radix NG section to your AGENTS.md / CLAUDE.md, pointing agents at the docs and skills automatically. Plain-Markdown docs for every component are served at https://radix-ng.com/components/<name>.md.

Browse every component — with live examples, the data-* styling contract, and a full API reference — in the docs: radix-ng.com (plain-Markdown for each component is served at radix-ng.com/components/<name>.md). The site is generated from the source, so it is always the current list of what's available.

Planned, not yet available:

• Date Picker
• Date Range Field
• Date Range Picker
• Range Calendar

Want something else? Open an issue or start a discussion.

• OriginUI for Angular — styled components built on these primitives
• shadcn/ui for Angular — shadcn-style components
• DataGrid — built with TanStack Table

Contributions are welcome! The repository is an Nx monorepo:

.
├── apps
│   ├── radix-storybook       Storybook docs and examples
│   ├── radix-playground      Angular playground app
│   ├── radix-ssr-testing     SSR smoke-test app
│   ├── radix-perf-testing    performance benchmarks
│   └── visual-regression     Playwright visual and behavior specs
└── packages
    └── primitives         headless primitives (no styling)

pnpm primitives:test       # run tests
pnpm primitives:build      # build the library
pnpm storybook:primitives  # start Storybook
pnpm playground            # start the playground app
pnpm test-visual           # build Storybook and run Playwright visual checks

We're excited to see the community adopt Radix NG, raise issues, and provide feedback — whether it's a feature request, bug report, or a project to showcase.

• Join our Discord
• Follow development news and releases on Telegram
• GitHub Discussions

This project is licensed under the terms of the MIT license.