Headless UI для Angular: Radix NG Primitives
Появилась Radix NG — headless, signals-first библиотека UI-примитивов для Angular. Она не поставляет готовые стилизованные компоненты, а дает слой поведения, доступности и композиции, поверх которого можно строить собственный интерфейс.
Проект начинался как Angular-порт Radix UI, а сейчас в основном адаптирует архитектуру и поведение Base UI под Angular: через директивы, signals и dependency injection.
Что внутри:
- Headless-подход: без встроенных стилей, с полным контролем над разметкой и CSS.
- Состояния через data-* атрибуты и CSS custom properties — удобно для любой системы стилизации.
- Accessibility по WAI-ARIA practices: роли, aria-* атрибуты, управление фокусом и клавиатурная навигация.
- Signals-first API: input(), model(), computed(), signal(), effect().
- Композиция через Angular Directive Composition API, hostDirectives и общие building blocks вроде Popper, Dismissable Layer и Focus Scope.
- Uncontrolled by default: внутреннее поведение работает из коробки, controlled value можно передать только там, где это действительно нужно.
- Tree-shakeable entry points: можно импортировать только нужные примитивы.
- AI-ready: installable Skills помогают coding assistants учитывать API примитивов, примеры и контракт стилизации через data-* атрибуты.
Пример:
<button rdxSwitchRoot class="switch" [(checked)]="enabled"> <span rdxSwitchThumb class="thumb"></span> </button>
.switch[data-checked] {
background: var(--primary);
}
Radix NG можно использовать как основу для дизайн-системы или подключать постепенно в существующем Angular-приложении, когда нужно сохранить контроль над UI, но не реализовывать с нуля поведение и accessibility.
https://radix-ng.com