headlessui Documentation

File: README.md Copy Chapter

Headless UI

Documentation Copy Chapter

For full documentation, visit headlessui.com.

Installing the latest version Copy Section

You can install the latest version by using:

• npm install @headlessui/react@latest
• npm install @headlessui/vue@latest

Installing the insiders version Copy Section

You can install the insiders version (which points to whatever the latest commit on the main branch is) by using:

• npm install @headlessui/react@insiders
• npm install @headlessui/vue@insiders

Note: The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.

Packages Copy Chapter

Community Copy Chapter

For help, discussion about best practices, or feature ideas:

Discuss Headless UI on GitHub

Contributing Copy Chapter

If you're interested in contributing to Headless UI, please read our contributing docs before submitting a pull request.

File: packages/@headlessui-vue/README.md Copy Chapter

@headlessui/vue

Installation Copy Chapter

Please note that this library only supports Vue 3.

npm install @headlessui/vue

Documentation Copy Chapter

For full documentation, visit headlessui.com.

Community Copy Chapter

For help, discussion about best practices, or feature ideas:

Discuss Headless UI on GitHub

File: packages/@headlessui-tailwindcss/README.md Copy Chapter

@headlessui/tailwindcss

Installation Copy Chapter

npm install @headlessui/tailwindcss

// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('@headlessui/tailwindcss')

    // Or with a custom prefix:
    require('@headlessui/tailwindcss')({ prefix: 'ui' })
  ],
}

Documentation Copy Chapter

Use Tailwind CSS utilities for styling the components based on their state. You can use the
following variants:

Example:

import { Menu } from '@headlessui/react'

function MyDropdown() {
  return (
    <Menu>
      <Menu.Button>More</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          <a
            className="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"
            href="/account-settings"
          >
            Account settings
          </a>
        </Menu.Item>
        {/* ... */}
      </Menu.Items>
    </Menu>
  )
}

Community Copy Chapter

For help, discussion about best practices, or feature ideas:

Discuss Headless UI on GitHub

File: packages/@headlessui-react/README.md Copy Chapter

@headlessui/react

Installation Copy Chapter

npm install @headlessui/react

Documentation Copy Chapter

For full documentation, visit headlessui.dev.

Community Copy Chapter

For help, discussion about best practices, or feature ideas:

Discuss Headless UI on GitHub