# @plumeria/headlessui

Source: https://plumeria.dev/docs/api-reference/components/headlessui





`@plumeria/headlessui` is a curated set of essential headless primitives, built on [Radix UI](https://www.radix-ui.com/)

## Installation `headlessui` [#installation-headlessui]

To use the headlessui integrated into `Radix UI`, configuration of `@plumeria/core` and your bundler is required.
Please refer to the [Installation](getting-started/installation) section for details.

<Tabs items="['npm', 'yarn', 'pnpm']">
  {/* prettier-ignore */}

  <Tab>
    ```sh title="Terminal"
    npm i @plumeria/headlessui
    ```
  </Tab>

  {/* prettier-ignore */}

  <Tab>
    ```sh title="Terminal"
    yarn add @plumeria/headlessui
    ```
  </Tab>

  {/* prettier-ignore */}

  <Tab>
    ```sh title="Terminal"
    pnpm i @plumeria/headlessui
    ```
  </Tab>
</Tabs>

## How classStyle works [#how-classstyle-works]

When `classStyle` is passed to a custom component, it is **automatically compiled to `className` and `style` at the call site — before the component ever runs**.
Therefore, each `@plumeria/headlessui` component does not need to know about `classStyle` at all; it simply spreads `...props` onto the underlying Radix primitive.

```tsx
import * as css from '@plumeria/core';
import { DialogTrigger } from '@plumeria/headlessui';

const styles = css.create({
  primary: {
    padding: '10px',
    backgroundColor: 'navy',
    color: '#fff',
  },
});

// classStyle is compiled to className="xxxxxxxx" at this call site
<Dialog.Trigger classStyle={styles.primary}>Open</Dialog.Trigger>;
```

***

## Interactive Demo [#interactive-demo]

Below is a live demo of all six components from `@plumeria/headlessui`, styled with Plumeria.

<HeadlessDemoLazy />

***

## Components [#components]

The following twenty-five component groups are exported. All components support `ref` forwarding and props spread.

### Accordion [#accordion]

* `Item`
* `Header`
* `Trigger`
* `Content`

### AlertDialog [#alertdialog]

* `Trigger`
* `Portal`
* `Overlay`
* `Content`
* `Title`
* `Description`
* `Action`
* `Cancel`

### Avatar [#avatar]

* `Image`
* `Fallback`

### Checkbox [#checkbox]

* `Indicator`

### Collapsible [#collapsible]

* `Trigger`
* `Content`

### ContextMenu [#contextmenu]

* `Trigger`
* `Portal`
* `Content`
* `Group`
* `Label`
* `Item`
* `CheckboxItem`
* `RadioGroup`
* `RadioItem`
* `ItemIndicator`
* `Separator`
* `Arrow`
* `Sub`
* `SubTrigger`
* `SubContent`

### Dialog [#dialog]

* `Trigger`
* `Portal`
* `Overlay`
* `Content`
* `Title`
* `Description`
* `Close`

### DropdownMenu [#dropdownmenu]

* `Trigger`
* `Portal`
* `Content`
* `Group`
* `Label`
* `Item`
* `CheckboxItem`
* `RadioGroup`
* `RadioItem`
* `ItemIndicator`
* `Separator`
* `Arrow`
* `Sub`
* `SubTrigger`
* `SubContent`

### Label [#label]

### Menubar [#menubar]

* `Menu`
* `Trigger`
* `Portal`
* `Content`
* `Group`
* `Label`
* `Item`
* `CheckboxItem`
* `RadioGroup`
* `RadioItem`
* `ItemIndicator`
* `Separator`
* `Arrow`
* `Sub`
* `SubTrigger`
* `SubContent`

### NavigationMenu [#navigationmenu]

* `Sub`
* `List`
* `Item`
* `Trigger`
* `Link`
* `Indicator`
* `Content`
* `Viewport`

### Popover [#popover]

* `Trigger`
* `Portal`
* `Content`
* `Close`
* `Arrow`
* `Anchor`

### Progress [#progress]

* `Indicator`

### RadioGroup [#radiogroup]

* `Item`
* `Indicator`

### ScrollArea [#scrollarea]

* `Viewport`
* `Scrollbar`
* `Thumb`
* `Corner`

### Select [#select]

* `Trigger`
* `Value`
* `Icon`
* `Portal`
* `Content`
* `Viewport`
* `Group`
* `Label`
* `Item`
* `ItemText`
* `ItemIndicator`
* `ScrollUpButton`
* `ScrollDownButton`
* `Separator`
* `Arrow`

### Separator [#separator]

### Slider [#slider]

* `Track`
* `Range`
* `Thumb`

### Switch [#switch]

* `Thumb`

### Tabs [#tabs]

* `List`
* `Trigger`
* `Content`

### Toast [#toast]

* `Provider`
* `Viewport`
* `Title`
* `Description`
* `Action`
* `Close`

### Toggle [#toggle]

### ToggleGroup [#togglegroup]

* `Item`

### Tooltip [#tooltip]

* `Provider`
* `Trigger`
* `Portal`
* `Content`
* `Arrow`

### VisuallyHidden [#visuallyhidden]