Headless UI

Definition

Librairie de composants accessibles et sans style par defaut, concue par l'equipe Tailwind. Fournit la logique (modals, menus, tabs) sans imposer de design.

Analogie

Un mannequin nu : il a la structure, tu choisis les vetements (les styles).

Exemple de code

import { Menu } from '@headlessui/react'
<Menu>
  <Menu.Button className="px-4 py-2">Options</Menu.Button>
  <Menu.Items className="absolute mt-2 bg-white shadow-lg">
    <Menu.Item>{({ active }) =>
      <a className={active ? 'bg-blue-100' : ''}>Edit</a>
    }</Menu.Item>
  </Menu.Items>
</Menu>

Cas d'usage

Implementer des composants accessibles (ARIA) avec un style 100% custom en Tailwind.

Termes lies