This version is not yet stable.
It is very important for me to maintain API compatibility provided by the Radix primitives. However, there are some features that I would prefer not to carry over. For example, the horizontal arrangement of radio buttons — I have indicated the reason in the code as to why this should be avoided.
Radix-NG is an unofficial Angular port of Radix UI, 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.
Visit https://radix-ng.com to view documentation.
- Taxonomy build with AnalogJS – https://primitives-taxonomy.vercel.app/
- shadcn/ui blocks - https://blocks.shadcn-ng.com/
- shadcn/ui Angular version – https://shadcn-ng.com/
- RadixUI Components ...'soon'
.
├── apps
│ ├── shadcn-docs (docs for shadcn/ui, based on ng-doc)
│ └── showcase-taxonomy (AnalogJS showcase Taxonomy app)
└── packages
├── components (components based on primitives with custom styling)
├── shadcn (shadcn/ui port)
└── primitives (headless primitives UI without any styling)
- Accordion (based on angular/cdk)
- Alert Dialog
- Avatar
- Checkbox (adaptation for FormGroup)
- Collapsible
- Context Menu (next) (based on angular/cdk)
- Dialog (based on angular/cdk)
- Dropdown (In progress) (based on angular/cdk)
- Hover Card
- Label
- Menubar (In progress) (based on angular/cdk)
- Navigation Menu
- Popover
- Progress
- Radio (adaptation for FormGroup)
- Select (In progress)
- Separator
- Switch
- Tabs
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
| Primitive | Description | Status | Due date |
|---|---|---|---|
| Accordion | ✅ | ||
| Alert Dialog | beta | ||
| Avatar | ✅ | ||
| Checkbox | beta | ||
| Collapsible | ✅ | ||
| Context Menu | |||
| Dialog | |||
| Dropdown | 🚀 In Progress | ||
| Hover Card |
...
Status Legend ✅ Completed 🚀 In Progress 🛠 In Review
- use validations framework – https://vestjs.dev/, Angular example
- (In progress) with Tanstack Table, https://shadcn-datagrid.vercel.app/
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!
