Headless UI Website Markup

Headless UI Website Markup

Headless UI is an unstyled component library from the Tailwind CSS team. It supports React and Vue. It's simpler than Radix UI in terms of the number of components, but works great for Tailwind CSS projects — the API is designed around render props and className.

How Headless UI Differs from Radix

Installation

npm install @headlessui/react

Components and Examples

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">
    Options <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'}`}>
          Edit
        </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'}`}>
          Delete
        </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>Question</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">
        Answer to the question...
      </Disclosure.Panel>
    </>
  )}
</Disclosure>

Accessibility

Like Radix, Headless UI implements WAI-ARIA:

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

Tailwind UI

Official paid Tailwind UI templates are built on Headless UI. Purchasing Tailwind UI ($299) provides ~500+ components implemented with Headless UI + Tailwind CSS — a good starting point for commercial projects.

Transition Animations

Headless UI includes a Transition component for smooth animations:

<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>

Timeline

Implementation of a component set (menu, modal, tabs, accordion, select) with Headless UI + Tailwind CSS: 2–4 days.