@plumeria/headlessui

@plumeria/headlessui is a curated set of essential headless primitives, built on Radix UI

Installation headlessui

Using @plumeria/headlessui requires the configuration of @plumeria/core and your bundler. Please refer to the Installation section for details.

pnpm i @plumeria/headlessui

How classStyle works

@plumeria/headlessui is a dependency the build never scans, so a classStyle written on one of its components is 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.

import * as css from '@plumeria/core';
import { Dialog } 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>;

A component of your own can compose a style it receives onto a part:

export const OpenButton = ({ classStyle }: { classStyle?: css.Style }) => (
  <Dialog.Trigger classStyle={[styles.primary, classStyle]}>Open</Dialog.Trigger>
);

Interactive Demo

Below is a live demo of twenty of the twenty-five component groups, styled with Plumeria.

Components

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

Accordion

• Item
• Header
• Trigger
• Content

AlertDialog

• Trigger
• Portal
• Overlay
• Content
• Title
• Description
• Action
• Cancel

Avatar

• Image
• Fallback

Checkbox

• Indicator

Collapsible

• Trigger
• Content

ContextMenu

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

Dialog

• Trigger
• Portal
• Overlay
• Content
• Title
• Description
• Close

DropdownMenu

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

Label

Menubar

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

NavigationMenu

• Sub
• List
• Item
• Trigger
• Link
• Indicator
• Content
• Viewport

Popover

• Trigger
• Portal
• Content
• Close
• Arrow
• Anchor

Progress

• Indicator

RadioGroup

• Item
• Indicator

ScrollArea

• Viewport
• Scrollbar
• Thumb
• Corner

Select

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

Separator

Slider

• Track
• Range
• Thumb

Switch

• Thumb

Tabs

• List
• Trigger
• Content

Toast

• Provider
• Viewport
• Title
• Description
• Action
• Close

Toggle

ToggleGroup

• Item

Tooltip

• Provider
• Trigger
• Portal
• Content
• Arrow

VisuallyHidden