## File: README.md

<h3 align="center">
  Headless UI
</h3>



---

## Documentation

For full documentation, visit [headlessui.com](https://headlessui.com).

### Installing the latest version

You can install the latest version by using:

- `npm install @headlessui/react@latest`
- `npm install @headlessui/vue@latest`

### Installing the insiders version

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

| Name                                                                                                                 |                                                              Version                                                              |                                                              Downloads                                                               |
| :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: |
| [`@headlessui/react`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react)             |       [](https://www.npmjs.com/package/@headlessui/react)       |       [](https://www.npmjs.com/package/@headlessui/react)       |
| [`@headlessui/vue`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue)                 |         [](https://www.npmjs.com/package/@headlessui/vue)         |         [](https://www.npmjs.com/package/@headlessui/vue)         |
| [`@headlessui/tailwindcss`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) | [](https://www.npmjs.com/package/@headlessui/tailwindcss) | [](https://www.npmjs.com/package/@headlessui/tailwindcss) |

## Community

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

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)

## Contributing

If you're interested in contributing to Headless UI, please read our [contributing docs](https://github.com/tailwindlabs/headlessui/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.

---

## File: packages/@headlessui-vue/README.md

<h3 align="center">
  @headlessui/vue
</h3>





## Installation

Please note that **this library only supports Vue 3**.

```sh
npm install @headlessui/vue
```

## Documentation

For full documentation, visit [headlessui.com](https://headlessui.com/v1/vue).

## Community

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

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)

---

## File: packages/@headlessui-tailwindcss/README.md

<h3 align="center">
  @headlessui/tailwindcss
</h3>





## Installation

```sh
npm install @headlessui/tailwindcss
```

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

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

## Documentation

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

| Variant            | Inverse variant        |
| ------------------ | ---------------------- |
| `ui-open`          | `ui-not-open`          |
| `ui-checked`       | `ui-not-checked`       |
| `ui-selected`      | `ui-not-selected`      |
| `ui-active`        | `ui-not-active`        |
| `ui-disabled`      | `ui-not-disabled`      |
| `ui-focus-visible` | `ui-not-focus-visible` |

Example:

```js
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

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

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)

---

## File: packages/@headlessui-react/README.md

<h3 align="center">
  @headlessui/react
</h3>





## Installation

```sh
npm install @headlessui/react
```

## Documentation

For full documentation, visit [headlessui.dev](https://headlessui.dev/react/menu).

## Community

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

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)