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.
- 🎯 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
hostDirectivesand 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>).
npm install @radix-ng/primitives
# or
pnpm add @radix-ng/primitives
# or
yarn add @radix-ng/primitivesimport { 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.
- 📖 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
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 |
- 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-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 StorybookWe'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.
This project is licensed under the terms of the MIT license.