Radix NG

Headless, signals-first UI primitives for Angular.

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.

Features

• 🎯 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()).
• 🧩 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.

Installation

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

Quick start

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

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

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

Documentation

• 📖 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

AI assistant skills

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.

Components

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.

Roadmap

Planned, not yet available:

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

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

Ecosystem

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

Contributing

Contributions are welcome! The repository is an Nx monorepo:

.
├── apps
│   ├── radix-docs         documentation (Astro)
│   ├── radix-ssr-testing  SSR tests for unstyled primitives
│   └── radix-storybook    Storybook for primitives
└── packages
    └── primitives         headless primitives (no styling)

pnpm primitives:test       # run tests
pnpm primitives:build      # build the library
pnpm storybook:primitives  # start Storybook

Community

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

Contributor analytics

License

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