Вёрстка сайта с использованием Radix UI

Вёрстка сайта с использованием Radix UI

Radix UI — библиотека unstyled (headless) примитивов для React с фокусом на accessibility. Предоставляет правильную семантику, keyboard navigation, ARIA-атрибуты и управление фокусом — без навязывания стилей. Разработчик пишет CSS/Tailwind сам.

Принципы Radix

Unstyled: компонент не несёт визуальных стилей. <Dialog.Root> не имеет ни цвета, ни отступов — только логику.

Accessible by default: каждый компонент реализует WAI-ARIA pattern. Например, <Select> автоматически управляет role="combobox", aria-expanded, aria-activedescendant, keyboard navigation (стрелки, Enter, Escape).

Composable: компоненты состоят из частей (Anatomy), каждую из которых можно стилизовать независимо.

Установка и использование

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:

/* Анимация появления Dialog */
[data-state="open"] .dialog-overlay {
  animation: fadeIn 150ms ease;
}
[data-state="closed"] .dialog-overlay {
  animation: fadeOut 150ms ease;
}

/* Select open state */
[data-state="open"] .select-trigger {
  border-color: #2563eb;
}

С Tailwind — через плагин tailwindcss-radix:

<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

• Dialog, AlertDialog, Sheet
• Select, DropdownMenu, ContextMenu, NavigationMenu
• Tooltip, Popover, HoverCard
• Accordion, Tabs, Collapsible
• Checkbox, RadioGroup, Switch, Slider
• Progress, ScrollArea, Separator
• Avatar, AspectRatio

Shadcn/ui — надстройка над Radix

Shadcn/ui предоставляет готовые стилизованные компоненты на основе Radix + Tailwind. В отличие от обычных UI-библиотек — компоненты копируются в проект (npx shadcn-ui add button), не импортируются как зависимость. Полная свобода модификации.

Сроки

Реализация набора UI-компонентов (modal, dropdown, select, tabs, form) с использованием Radix UI + кастомными стилями: 3–5 дней в зависимости от количества и сложности компонентов.