LibraryActive

Headless UI

Unstyled, accessible UI components for React and Vue.

Open source page ↗

Field note

What it does

Headless UI provides unstyled, fully accessible UI components for React and Vue, including Button, Dialog, and Menu.

Capabilities

Available capabilities

Accessible UI Accessibility support Unstyled Components Data attributes styling Render Props API

Tags

Tags

UI Components Tailwind CSS React Accessibility Vue

Ways to use it

Ways to use it

npm

javascript / @headlessui/react

npm

javascript / @headlessui/react

Product features

Product features

Adding a backdrop

Adding transitions

Basic example

Button component

A thin wrapper around the native button element with hover, focus, and active states.

Components

Data attributes

Exposes data-hover, data-active, data-focus, and data-disabled attributes for styling.

Dialog

Examples

Forms

Managing initial focus

Render props

Exposes hover, active, focus, and disabled states via render props.

Rendering to a portal

Scrollable dialogs

Showing/hiding the dialog

Styling