@headlessui/react

What is @headlessui/react?

The @headlessui/react package provides a set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS, for React projects. It allows developers to build fully accessible UI components without having to design the visual part from scratch, focusing instead on functionality and accessibility.

What are @headlessui/react's main functionalities?

Dropdown Menu

This feature allows developers to create a dropdown menu with accessible interactions. The example shows a basic dropdown menu with two options, highlighting the active option.

import { Menu } from '@headlessui/react';

<Menu>
  <Menu.Button>More</Menu.Button>
  <Menu.Items>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/account-settings"
        >
          Account settings
        </a>
      )}
    </Menu.Item>
    <Menu.Item>
      {({ active }) => (
        <a
          className={`${active ? 'bg-blue-500 text-white' : 'text-gray-900'}`}
          href="/sign-out"
        >
          Sign out
        </a>
      )}
    </Menu.Item>
  </Menu.Items>
</Menu>

Dialog (Modal)

This feature enables the creation of a dialog (modal) component. The example demonstrates how to use the Dialog component to create a modal that can be opened, closed, and contains accessible titles and descriptions.

import { Dialog } from '@headlessui/react';
import { useState } from 'react';

function MyDialog() {
  let [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Dialog</button>

      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <Dialog.Overlay />

        <Dialog.Title>Deactivate account</Dialog.Title>
        <Dialog.Description>
          This will permanently deactivate your account
        </Dialog.Description>

        <button onClick={() => setIsOpen(false)}>Deactivate</button>
        <button onClick={() => setIsOpen(false)}>Cancel</button>
      </Dialog>
    </>
  );
}

Other packages similar to @headlessui/react

react-bootstrap

React Bootstrap offers a set of accessible components that can be styled using Bootstrap's utility classes. While it provides similar functionality in terms of creating UI components, it's tightly coupled with Bootstrap's design system, unlike @headlessui/react which is unstyled and more flexible with styling.

material-ui

Material-UI is a popular React component library that follows Google's Material Design guidelines. It offers a wide range of pre-styled components that are accessible. Compared to @headlessui/react, Material-UI components come with a default styling inspired by Material Design, making it less flexible if you're aiming for a different design system.

chakra-ui

Chakra UI is a simple, modular and accessible component library that gives you the building blocks to build your React applications. Similar to @headlessui/react, it focuses on accessibility and flexibility but comes with default styling that can be easily customized using style props.

README

@headlessui/react

A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.

Installation

# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react

Components

This project is still in early development. New components will be added regularly over the coming months.

• Transition
• Menu Button (Dropdown)
• Listbox (Select)
• Switch (Toggle)
• Disclosure
• FocusTrap
• Portal
• Dialog
• Popover
• Radio Group

Roadmap

This project is still in early development, but the plan is to build out all of the primitives we need to provide interactive React examples of all of the components included in Tailwind UI, the commercial component directory that helps us fund the development of our open-source work like Tailwind CSS.

This includes things like:

• Tabs
• Accordions

...and more in the future.

We'll be continuing to develop new components on an on-going basis, with a goal of reaching a pretty fleshed out v1.0 by the end of the year.