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 radix-ng.com to view documentation.
Storybook sb-primitives.radix-ng.com
- Taxonomy build with AnalogJS – https://primitives-taxonomy.vercel.app/
- shadcn/ui blocks - https://blocks.shadcn-ng.com/
- OriginUI
- shadcn/ui Angular version – https://shadcn-ng.com/
- RadixUI Components ...'soon'
.
├── 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)
| Primitive | Description | Status | A11y |
|---|---|---|---|
| Accordion | ✅ | ||
| Alert Dialog | beta | ||
| Avatar | ✅ | ||
| Aspect Ratio | ✅ | ||
| Checkbox | ✅ | ||
| 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!
