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

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

Headless UI — библиотека unstyled компонентов от команды Tailwind CSS. Поддерживает React и Vue. Проще Radix UI по количеству компонентов, но отлично подходит для проектов на Tailwind CSS — API спроектирован под render props и className.

Чем Headless UI отличается от Radix

Установка

npm install @headlessui/react

Компоненты и примеры

Menu (Dropdown):

import { Menu } from '@headlessui/react';

<Menu as="div" className="relative">
  <Menu.Button className="flex items-center gap-2 px-4 py-2 rounded-md bg-white border">
    Опции <ChevronDownIcon className="w-4 h-4" />
  </Menu.Button>

  <Menu.Items className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg ring-1 ring-black/5 focus:outline-none z-10">
    <Menu.Item>
      {({ active }) => (
        <a href="#" className={`block px-4 py-2 text-sm ${active ? 'bg-blue-50 text-blue-700' : 'text-gray-700'}`}>
          Редактировать
        </a>
      )}
    </Menu.Item>
    <Menu.Item disabled>
      {({ disabled }) => (
        <span className={`block px-4 py-2 text-sm ${disabled ? 'text-gray-400 cursor-not-allowed' : 'text-gray-700'}`}>
          Удалить
        </span>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Disclosure (Accordion):

import { Disclosure } from '@headlessui/react';

<Disclosure>
  {({ open }) => (
    <>
      <Disclosure.Button className="flex justify-between w-full px-4 py-3 font-medium text-left bg-gray-50 hover:bg-gray-100 rounded-lg">
        <span>Вопрос</span>
        <ChevronUpIcon className={`w-5 h-5 transition-transform ${open ? 'rotate-180' : ''}`} />
      </Disclosure.Button>
      <Disclosure.Panel className="px-4 pt-2 pb-4 text-gray-600">
        Ответ на вопрос...
      </Disclosure.Panel>
    </>
  )}
</Disclosure>

Доступность

Как и Radix, Headless UI реализует WAI-ARIA:

• Listbox — role="listbox" с aria-selected
• Combobox — role="combobox" с aria-autocomplete
• Dialog — role="dialog" с aria-modal и focus trap
• Tabs — role="tablist" / role="tab" / role="tabpanel"

Tailwind UI

Официальные платные шаблоны Tailwind UI построены на Headless UI. Покупка Tailwind UI ($299) даёт ~500+ компонентов, реализованных с Headless UI + Tailwind CSS — хорошая отправная точка для коммерческих проектов.

Transition-анимации

Headless UI включает компонент Transition для плавных анимаций:

<Transition
  show={isOpen}
  enter="transition ease-out duration-100"
  enterFrom="transform opacity-0 scale-95"
  enterTo="transform opacity-100 scale-100"
  leave="transition ease-in duration-75"
  leaveFrom="transform opacity-100 scale-100"
  leaveTo="transform opacity-0 scale-95"
>
  <Menu.Items>...</Menu.Items>
</Transition>

Сроки

Реализация набора компонентов (меню, modal, tabs, accordion, select) с Headless UI + Tailwind CSS: 2–4 дня.