Tailwind Resources Logo Tailwind Resources
Primitives screenshot

Primitives

Author Avatar Theme by Radix ng
Updated: 22 May 2025
188 Stars

Angular port of Radix UI Primitives. Accessible. Customizable.

Github Live Preview

Categories

Angular Express Vite Radix ui Shadcn ui

Overview:

Radix-NG is an unofficial Angular port of Radix UI, a low-level UI component library that prioritizes accessibility, customization, and developer experience. It shares the same principles and vision as Radix UI, making it suitable for inclusion in design systems or adoption incrementally. The project structure includes a roadmap and showcases different components and their statuses.

Features:

  • Accessibility: focuses on ensuring all components meet accessibility standards.
  • Customization: allows for easy customization of UI components to suit different design needs.
  • Developer Experience: prioritizes a smooth and efficient development experience.
  • Base Layer Integration: can be used as the base layer of a design system or integrated incrementally.
  • Documentation: detailed documentation available at radix-ng.com.
  • Storybook Showcase: showcases components in a Storybook at sb-primitives.radix-ng.com.
  • Component Varieties: offers a diverse range of components such as Dialog, Select, Progress, and more.
  • Community Engagement: encourages community adoption and feedback for continuous improvement.

Installation:

To install Radix-NG, follow these steps:

  1. Run the following command to install Radix-NG:
npm install @radix-ui/angular
  1. Import the desired Radix UI components into your Angular module:
import { RadixDialogModule, RadixSelectModule } from '@radix-ui/angular';
@NgModule({
  imports: [
    RadixDialogModule,
    RadixSelectModule
  ]
})
export class YourModule {}
  1. Start using the components in your Angular templates:
<radix-dialog>...</radix-dialog>
<radix-select>...</radix-select>

Summary:

Radix-NG, as an Angular port of Radix UI, provides a comprehensive set of UI components with a strong focus on accessibility and customization. Its seamless integration with Angular projects and commitment to developer experience make it a valuable addition to any web development toolkit. Furthermore, ongoing community engagement and feedback mechanisms ensure continuous enhancements and improvements to the library.