Верстка сайту з використанням Radix UI

Верстка сайту з використанням Radix UI

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

Принципи Radix

Unstyled: компоненти не мають візуальних стилів. <Dialog.Root> не має ні кольору, ні відступів — тільки логіки.

Accessible by default: кожен компонент реалізує WAI-ARIA паттерни. Наприклад, <Select> автоматично керує role="combobox", aria-expanded, aria-activedescendant, навігацією клавіатури (стрілки, 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 відкритий стан */
[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 днів залежно від кількості та складності компонентів.