Headless UI

Overview

Headless UI is the official unstyled UI component library created by Tailwind Labs (the creators of Tailwind CSS). Available for both React and Vue, it provides completely unstyled, accessible components designed to be styled with Tailwind classes.

Key Features

• Tailwind Labs Official: Designed specifically to work harmoniously with Tailwind CSS utility classes and data-* variants.
• React & Vue Support: Identical component logic available across both React and Vue 3 ecosystems.
• Full Keyboard Navigation: Automatic focus management, tab trapping, and ARIA attributes.
• Zero Styling Opinions: Complete freedom to apply any CSS classes without fighting default component styles.

Installation & Quick Start

npm install @headlessui/react

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

export default function App() {
  return (
    <Menu>
      <MenuButton className="bg-primary text-white px-3 py-1.5 rounded-lg">Options</MenuButton>
      <MenuItems className="bg-card border rounded-lg p-1">
        <MenuItem>
          <button className="data-[focus]:bg-muted p-2 rounded w-full text-left">Settings</button>
        </MenuItem>
      </MenuItems>
    </Menu>
  );
}

Why Choose Headless UI?

• Best for: React and Vue projects built with Tailwind CSS needing accessible dropdowns, dialogs, and popovers.
• Not suitable for: Teams who do not use Tailwind CSS.