Skip to content

README.md

Latest commit

 

History

History
157 lines (118 loc) · 6.88 KB

README.md

File metadata and controls

157 lines (118 loc) · 6.88 KB

Radix NG

Build Size Version Downloads License Angular Discord Chat

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

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

Contributing

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

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.

Contributor analytics

Repobeats analytics image

License

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