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.
Next version https://next.radix-ng.com 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)
Primitive | Description | Status | A11y |
---|---|---|---|
Accordion | ✅ | ||
Alert Dialog | beta | ||
Avatar | ✅ | ||
Checkbox | beta | ||
Collapsible | ✅ | ||
Context Menu | ✅ | ||
Dialog | ✅ | ||
DropdownMenu | ✅ | ||
Form | 🚀 In Progress | ||
Hover Card | |||
Label | ✅ | ||
Menubar | beta | ||
Navigation Menu | |||
Popover | |||
Progress | ✅ | ||
Radio | ✅ | ||
Select | |||
Separator | ✅ | ||
Slider | |||
Switch | ✅ | ||
Tabs | ✅ | ||
Toast | |||
Toggle | ✅ | ||
Toggle Group | ✅ | ||
Toolbar | |||
Tooltip | 🚀 In Progress |
...
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!