Headless UI

Qué es

Headless UI es una biblioteca de componentes de interfaz creada por Tailwind Labs, el equipo detrás de Tailwind CSS. Sus componentes vienen completamente sin estilos pero con toda la lógica de interacción y accesibilidad ya resuelta (gestión de foco, navegación por teclado, atributos ARIA). Está disponible para React (@headlessui/react) y para Vue (@headlessui/vue), e incluye además un plugin para Tailwind. Es software open source con licencia MIT.

Para qué sirve

• Implementar menús desplegables, modales, popovers, pestañas y combobox accesibles sin partir de cero.
• Mantener el control total del diseño aplicando tus propias clases de Tailwind o CSS.
• Cumplir requisitos de accesibilidad (WAI-ARIA, teclado, foco) sin escribir esa lógica a mano.
• Reutilizar la misma base de componentes en proyectos React y Vue.

Cuándo usarlo

Es ideal cuando ya usas Tailwind CSS y quieres componentes interactivos correctamente accesibles, pero prefieres definir tú la apariencia en lugar de adoptar un sistema de diseño cerrado. Si en cambio buscas componentes ya estilizados listos para usar, encajan mejor opciones como shadcn/ui (que de hecho se apoya en primitivas headless), Radix UI o Material UI.

Ejemplo

Instalación en un proyecto React:

npm install @headlessui/react

Uso básico de un Menu desplegable:

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'

function Acciones() {
  return (
    <Menu>
      <MenuButton className="px-3 py-2 rounded bg-gray-800 text-white">
        Opciones
      </MenuButton>
      <MenuItems className="mt-2 rounded border bg-white shadow">
        <MenuItem>
          <a className="block px-4 py-2" href="/perfil">Perfil</a>
        </MenuItem>
        <MenuItem>
          <a className="block px-4 py-2" href="/salir">Salir</a>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

El componente aporta el comportamiento (apertura, foco, teclado) y tú añades las clases de estilo.

Puntos clave

• Componentes sin estilos: tú decides el diseño con Tailwind o CSS propio.
• Accesibilidad de serie: roles ARIA, navegación por teclado y gestión del foco.
• Soporte oficial para React y Vue con la misma API conceptual.
• Mantenido activamente por Tailwind Labs e integrado con el ecosistema Tailwind.

Ten en cuenta

No incluye estilos ni un sistema de diseño: tendrás que invertir tiempo en darle apariencia, idealmente con Tailwind. El catálogo de componentes es deliberadamente acotado (menús, diálogos, listas, pestañas, formularios), así que para piezas más complejas o un set completo puede que necesites complementarlo con otras bibliotecas. Licencia MIT y proyecto activo en el momento de escribir esto.