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>).

Installation

npm install @radix-ng/primitives
# or
pnpm add @radix-ng/primitives
# or
yarn add @radix-ng/primitives

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 — guides and API reference
• 🧪 sb-primitives.radix-ng.com — Storybook
• 🎙 The Story of My Radix UI Port for Angular — talk, FrontendConf Moscow 2025

Components

Status: ✅ Completed · 🚀 In Progress · 🛠 In Review

Core primitives

Primitive	Status
Accordion	✅
Alert Dialog	beta
Avatar	✅
Aspect Ratio	✅
Button	✅
Checkbox	✅
Collapsible	✅
Context Menu	✅
Dialog	✅
DropdownMenu	✅
Form	?
Hover Card	✅
Label	✅
Menubar	✅
Navigation Menu	✅
Popover	✅
Progress	✅
Radio	✅
Select	beta
Separator	✅
Slider	✅
Switch	✅
Tabs	✅
Toast
Toggle	✅
Toggle Group	✅
Toolbar	✅
Tooltip	✅

Dates & inputs

Primitive	Status
Calendar	✅
Date Field	✅
Date Picker
Date Range Field
Date Range Picker
Editable	✅
Number Field	✅
Pagination	✅
Range Calendar
Stepper	✅
Time Field	✅

Utilities

Primitive	Status
FocusOutside	✅
PointerDownOutside	✅
FocusGuards
FocusScope

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
• Join our Telegram
• GitHub Discussions

Contributor analytics

License

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