https://github.com/radix-ng/primitives
Angular port of Radix UI Primitives. Accessible. Customizable.
https://github.com/radix-ng/primitives
angular components design-system headless-components radix radix-ui shadcn-ui
Last synced: 30 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 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-10T09:18:46.000Z (about 1 month ago)
- Last Synced: 2025-05-10T09:30:50.200Z (about 1 month ago)
- Topics: angular, components, design-system, headless-components, radix, radix-ui, shadcn-ui
- Language: TypeScript
- Homepage: https://radix-ng.com
- Size: 9.11 MB
- Stars: 183
- Watchers: 7
- Forks: 12
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-angular - primitives - Angular port of [Radix UI](https://www.radix-ui.com/) Primitives. Accessible. Customizable. (Table of contents / Third Party Components)
- fucking-awesome-angular - primitives - Angular port of 🌎 [Radix UI](www.radix-ui.com/) Primitives. Accessible. Customizable. (Table of contents / Third Party Components)
- 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))
README
# Radix Angular
[](https://www.npmjs.com/package/@radix-ng/primitives)
[](https://discord.gg/NaJb2XRWX9)
> This version is not yet stable.
>
> It is very important for me to maintain API compatibility provided by the Radix primitives.
> Radix-NG is an unofficial Angular port of [Radix UI](https://www.radix-ui.com/), thus we share the same principal and vision when building primitives.
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience.
You can use these components either as the base layer of your design system, or adopt them incrementally.
Some primitives are based on [@angular/cdk](https://material.angular.io/cdk/categories).
---
## Documentation
- [radix-ng.com](https://radix-ng.com)
- [sb-primitives.radix-ng.com](https://sb-primitives.radix-ng.com/) – Storybook
## Showcases
1. [Taxonomy](https://github.com/shadcn-ui/taxonomy) build with AnalogJS – [https://primitives-taxonomy.vercel.app/](https://primitives-taxonomy.vercel.app/)
2. [shadcn/ui blocks](https://ui.shadcn.com/blocks) - [https://blocks.shadcn-ng.com/](https://blocks.shadcn-ng.com/)
3. [OriginUI](https://origin-ng.com/) Angular
4. shadcn/ui – [ui.adrianub.dev](https://ui.adrianub.dev/)
5. RadixUI Components ...'soon'
## Project structure
```angular2html
.
├── apps
│ ├── radix-docs (documentation based on Astro)
│ ├── radix-ssr-testing (SSR test for unstyle primitives)
│ ├── shadcn-docs (docs for shadcn/ui, based on ng-doc, just for usage example)
│ ├── showcase-taxonomy (AnalogJS showcase Taxonomy app)
│ └── storybook-radix
│
└── packages
├── components (components based on primitives with custom styling)
├── shadcn (shadcn/ui just for usage example)
└── primitives (headless primitives UI without any styling)
```
## Roadmap
### RadixUI Primitives
| Primitive | Description | Status | A11y |
| --------------- | ----------- | ------ | ---- |
| Accordion | | ✅ | |
| Alert Dialog | | beta | |
| Avatar | | ✅ | |
| Aspect Ratio | | ✅ | |
| 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 | | ✅ | |
### Other Primitives
| Primitive | Description | Status |
| ---------- | ----------- | ------ |
| Pagination | | ✅ |
| Stepper | | ✅ |
**Status Legend**
✅ Completed
🚀 In Progress
🛠 In Review
### Forms
- [ ] use validations framework – [https://vestjs.dev/](https://vestjs.dev/), [Angular example](https://github.com/simplifiedcourses/ngx-vest-forms)
### DataGrid
- [ ] (In progress) with [Tanstack Table](https://tanstack.com/table/latest), [https://shadcn-datagrid.vercel.app/](https://shadcn-datagrid.vercel.app/)
## Community
We're excited to see the community adopt, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!
- [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).