Introduction
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.
Vision
Most of us share similar definitions for common UI patterns like accordion, checkbox, combobox, dialog, dropdown, select, slider, and tooltip. These UI patterns are documented by WAI-ARIA and generally understood by the community.
However, the implementations provided to us by the web platform are inadequate. They’re either non-existent, lacking in functionality, or cannot be customized sufficiently.
So, developers are forced to build custom components; an incredibly difficult task. As a result, most components on the web are inaccessible, non-performant, and lacking important features.
Our goal is to create a well-funded, open-source component library that the community can use to build accessible design systems.
Angular Design Principles
- Standalone Directives
- Directive composition API Angular directives offer a great way to encapsulate reusable behaviors— directives can apply attributes, CSS classes, and event listeners to an element.
Dependency from
Key Features
Components adhere to the WAI-ARIA design patterns where possible. We handle many of the difficult implementation details related to accessibility, including aria and role attributes, focus management, and keyboard navigation. Learn more in our accessibility overview.
Unstyled
Components ship with zero styles, giving you complete control over styling. Components can be styled with any styling solution (vanilla CSS, CSS preprocessors & etc).
Opened
Radix Primitives are designed to be customized to suit your needs. Our open component architecture provides you granular access to each component part, so you can wrap them and add your own event listeners, props, or refs.
Uncontrolled
Where applicable, components are uncontrolled by default but can also be controlled, alternatively. All of the behavior wiring is handled internally, so you can get up and running as smoothly as possible, without needing to create any local states.
Community
Discord
To get involved to community, ask questions, and share tips.
GitHub
To file issues, request features, and contribute, check out our GitHub.
Credits
All credits go to these open-source works and resources, on which this solution is based:
- Radix UI (MIT License)
- Radix Vue (MIT License)
- Radix Svelte (MIT License)
- Spartan UI (MIT License)
- NG Primitives (CC BY-ND 4.0)