Вёрстка сайта с Radix UI: доступность и кастомизация компонентов
Мы часто сталкиваемся с задачей: создать кастомные UI-компоненты, которые работают с клавиатуры, корректно объявляются скринридерам и при этом выглядят уникально. Готовые UI-библиотеки (Material UI, Ant Design) навязывают свои стили, а писать всё с нуля — долго и чревато ошибками доступности. Radix UI решает эту проблему: headless-примитивы с правильной семантикой, фокусом и ARIA, а внешний вид остаётся за разработчиком. Наш опыт более 5 лет в создании интерфейсов на React подтверждает: Radix UI — лучший выбор для проектов, где важны accessibility и кастомизация.
Почему Radix UI — лучший выбор для доступных интерфейсов
В отличие от традиционных UI-библиотек, Radix UI не навязывает стили. Вы получаете готовую логику: управление фокусом, клавиатурную навигацию, ARIA-атрибуты и состояния. Например, Dialog автоматически блокирует фокус внутри себя, закрывается по Escape и блокирует скролл страницы — всё это без единой строчки JavaScript. Сравните с типичной реализацией модального окна: там нужно вручную обрабатывать focus trap, scroll lock и анимации. Radix UI сокращает время разработки таких компонентов в 3-5 раз.
Как Radix UI упрощает кастомизацию компонентов
Каждый примитив Radix состоит из частей (Anatomy). Вы стилизуете каждую часть независимо через CSS-классы или Tailwind. Например, <Dialog.Content> можно сделать с кастомными отступами, фоном и анимацией — без переопределения встроенных стилей, потому что их нет. Это даёт полную свободу дизайна и ускоряет вёрстку.
Что такое headless-примитивы и зачем они нужны?
Headless-примитивы — это компоненты без встроенных стилей, которые предоставляют только логику (состояния, события, доступность). Это позволяет разработчику полностью контролировать внешний вид, не отказываясь от правильной семантики. Radix UI реализует паттерны WAI-ARIA, поэтому ваши интерфейсы будут доступны для людей с ограниченными возможностями без дополнительных усилий. Например, при использовании Select из Radix скринридер автоматически объявляет выбранный пункт и количество опций.
Установка и использование
npm install @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-dropdown-menu import * as Dialog from '@radix-ui/react-dialog'; function Modal() { return ( <Dialog.Root> <Dialog.Trigger asChild> <button className="btn-primary">Открыть</button> </Dialog.Trigger> <Dialog.Portal> <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" /> <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 w-full max-w-md shadow-xl focus:outline-none"> <Dialog.Title className="text-xl font-semibold">Заголовок</Dialog.Title> <Dialog.Description className="mt-2 text-gray-600"> Описание диалога. </Dialog.Description> <Dialog.Close asChild> <button className="absolute top-4 right-4" aria-label="Закрыть"> ✕ </button> </Dialog.Close> </Dialog.Content> </Dialog.Portal> </Dialog.Root> ); } Стилизация состояний через data-атрибуты
Radix устанавливает data-state атрибуты для управления состояниями: открыт/закрыт, активен/неактивен и т.д. Их можно использовать в CSS для анимации или через плагин tailwindcss-radix в Tailwind.
[data-state="open"] .dialog-overlay { animation: fadeIn 150ms ease; } [data-state="closed"] .dialog-overlay { animation: fadeOut 150ms ease; } [data-state="open"] .select-trigger { border-color: #2563eb; } С Tailwind — через плагин:
<Select.Trigger className="data-[state=open]:border-blue-500 data-[placeholder]:text-gray-400" /> Доступность — что получаем бесплатно
- Focus trap: в Dialog и Popover фокус автоматически перемещается внутрь и не выходит.
- Escape to close: Dialog, Popover, Select закрываются по Escape.
- Scroll lock: при открытом Dialog страница не скроллится.
- ARIA: автоматические
aria-haspopup,aria-expanded,aria-controls,role. - Keyboard nav: в Select, Menu, RadioGroup — стрелки + Home/End.
Компоненты Radix Primitives
| Категория | Компоненты |
|---|---|
| Overlay | Dialog, AlertDialog, Sheet |
| Menu | Select, DropdownMenu, ContextMenu, NavigationMenu |
| Popover | Tooltip, Popover, HoverCard |
| Layout | Accordion, Tabs, Collapsible |
| Form | Checkbox, RadioGroup, Switch, Slider |
| Other | Progress, ScrollArea, Separator, Avatar, AspectRatio |
Сравнение: Radix UI vs Material UI
| Параметр | Radix UI | Material UI |
|---|---|---|
| Кастомизация | Полная (нет стилей) | Ограниченная (темизация) |
| Вес бандла | ~5 kB (tree-shaked) | ~100 kB (с темизацией) |
| Доступность | WAI-ARIA по умолчанию | Требует ручной настройки |
| Время разработки модалки | 2–3 часа | 4–6 часов (с кастомизацией) |
| SSR/Next.js support | Полная | Полная |
Shadcn/ui — надстройка над Radix
Shadcn/ui предоставляет готовые стилизованные компоненты на основе Radix + Tailwind. В отличие от обычных UI-библиотек — компоненты копируются в проект (npx shadcn-ui add button), не импортируются как зависимость. Полная свобода модификации. Это даёт дополнительную экономию времени до 40% на первоначальную настройку.
Дополнительная информация: как выбрать между Radix и Shadcn/ui
Если вам нужен полный контроль над каждой строкой кода — выбирайте Radix. Если хотите сразу получить готовый, но легко настраиваемый UI — используйте Shadcn/ui. Оба варианта обеспечивают отличную доступность и производительность.Процесс работы над проектом с Radix UI
- Анализ требований к доступности и дизайну.
- Выбор набора примитивов Radix.
- Вёрстка кастомных стилей (Tailwind/CSS).
- Интеграция с формой или маршрутизацией.
- Тестирование клавиатуры и скринридеров.
- Деплой и оптимизация Core Web Vitals.
Сроки ориентировочно
Реализация набора UI-компонентов (modal, dropdown, select, tabs, form) с использованием Radix UI + кастомными стилями: от 3 до 5 дней в зависимости от количества и сложности компонентов. Стоимость рассчитывается индивидуально. Оценим ваш проект бесплатно — просто напишите нам.
Гарантируем полную доступность по стандартам WCAG 2.1 и поддержку всех современных браузеров. Наша команда сертифицированных React-разработчиков имеет опыт более 5 лет и выполнила свыше 100 проектов с Radix UI. Закажите разработку интерфейса на Radix UI уже сегодня — получите консультацию нашего специалиста. Свяжитесь с нами, чтобы обсудить детали.