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

Верстка сайту з Headless UI

Headless UI — бібліотека компонентів без стилів від команди 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 дні.