https://github.com/radix-ng/primitives
Angular port of Radix UI Primitives. Accessible. Customizable.
https://github.com/radix-ng/primitives
angular base-ui components design-system headless-components radix radix-ui shadcn-ui
Last synced: 11 days ago
JSON representation
Angular port of Radix UI Primitives. Accessible. Customizable.
- Host: GitHub
- URL: https://github.com/radix-ng/primitives
- Owner: radix-ng
- License: mit
- Created: 2024-04-06T17:19:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-06-06T19:48:45.000Z (15 days ago)
- Last Synced: 2026-06-06T20:10:27.633Z (15 days ago)
- Topics: angular, base-ui, components, design-system, headless-components, radix, radix-ui, shadcn-ui
- Language: TypeScript
- Homepage: https://radix-ng.com
- Size: 13.1 MB
- Stars: 250
- Watchers: 7
- Forks: 17
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
- awesome-shadcnui - Github - ng.com) | ★193 | (Components & Libraries)
- awesome-angular - primitives - Angular port of [Radix UI](https://www.radix-ui.com/) Primitives. Accessible. Customizable. (Third Party Components / UI Primitives)
- trackawesomelist - primitives (⭐147) - Angular port of [Radix UI](https://www.radix-ui.com/) Primitives. Accessible. Customizable. (Recently Updated / [Feb 11, 2025](/content/2025/02/11/README.md))
- fucking-awesome-angular - primitives - Angular port of 🌎 [Radix UI](www.radix-ui.com/) Primitives. Accessible. Customizable. (Third Party Components / UI Primitives)
README
# Radix NG
[](https://bundlephobia.com/result?p=@radix-ng/primitives@latest)
[](https://www.npmjs.com/package/@radix-ng/primitives)
[](https://www.npmjs.com/package/@radix-ng/primitives)
[](/LICENSE)
[](https://angular.dev)
[](https://discord.gg/NaJb2XRWX9)
> **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](https://www.radix-ui.com/); its API and behavior
now align primarily with [Base UI](https://base-ui.com/).
## Features
- 🎯 **Headless** — no styles, full control. State is exposed through `data-*` attributes.
- ♿ **Accessible** — built to the [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/), 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/`).
- 🤖 **AI-ready** — installable [Skills](#ai-assistant-skills) teach AI coding assistants the APIs, examples, and `data-*` styling contract.
## Installation
```bash
npm install @radix-ng/primitives
# or
pnpm add @radix-ng/primitives
# or
yarn add @radix-ng/primitives
```
## Quick start
```ts
import { Component } from '@angular/core';
import {
RdxCollapsibleRootDirective,
RdxCollapsibleTriggerDirective,
RdxCollapsibleContentDirective
} from '@radix-ng/primitives/collapsible';
@Component({
selector: 'app-demo',
imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsibleContentDirective],
template: `
Toggle
Content
`
})
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](https://radix-ng.com) — documentation, examples & API reference (Storybook)
- 📄 [radix-ng.com/llms.txt](https://radix-ng.com/llms.txt) — docs for LLMs (full text at [/llms-full.txt](https://radix-ng.com/llms-full.txt))
- 🤖 [AI assistant skills](#ai-assistant-skills) — for Claude Code, Cursor, Copilot, and others
- 🎙 [The Story of My Radix UI Port for Angular](https://frontendconf.ru/moscow/2025/abstracts/16014) — talk, FrontendConf Moscow 2025
## AI assistant skills
Give your AI coding assistant structured knowledge of the primitives — APIs, working examples, and
the `data-*` styling contract — so it writes correct, accessible code instead of guessing. The
[Skills](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](https://skills.sh).
```bash
npx skills add radix-ng/primitives/skills
```
## 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](https://originui-ng.com/) — styled components built on these primitives
- [shadcn/ui for Angular](https://ui.adrianub.dev/) — shadcn-style components
- [DataGrid](https://originui-ng.com/table) — built with [TanStack Table](https://tanstack.com/table/latest)
## 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)
```
```bash
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](https://discord.gg/NaJb2XRWX9)
- [Join our Telegram](https://t.me/radixng)
- [GitHub Discussions](https://github.com/radix-ng/primitives/discussions)
## Contributor analytics
## License
This project is licensed under the terms of the [MIT license](/LICENSE).