Headlessui

If you're building React or Vue apps with Tailwind and need accessible components without fighting pre-built styling, this is the move. You get fully unstyled primitives like Menu, Dialog, Listbox, and Combobox that handle all the ARIA patterns, keyboard navigation, and focus management while you keep complete control over the CSS. Made by the Tailwind Labs team, so the integration is seamless. The render props pattern gives you flexibility for custom logic without sacrificing accessibility. It's essentially the accessible foundation you'd spend weeks building yourself, but production ready and screen reader tested. Works with React 18, Vue 3, and handles SSR without issues.

skills.sh installs: 355
GitHub stars: 79
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bobmatnyc/claude-mpm-skills --skill headlessui --agent claude-code

Installs into .claude/skills of the current project.

Files

Headless UI - Accessible Component Primitives

Overview

Headless UI provides completely unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS. Built by the Tailwind Labs team, it offers production-ready accessibility without imposing design decisions.

Key Features:

Fully unstyled - bring your own styles
Complete keyboard navigation
Screen reader tested
Focus management
ARIA attributes handled automatically
TypeScript support
React 18 and Vue 3 compatible
SSR compatible
Render props for maximum flexibility

Installation:

# React
npm install @headlessui/react

# Vue
npm install @headlessui/vue

Component Catalog

Menu (Dropdown)

Accessible dropdown menus with keyboard navigation and ARIA support.

import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'

SKILL.md on GitHub

Details

Repository: github.com/bobmatnyc/claude-mpm-skills
Categories: Frontend Development, Design & UI/UX
First seen: Jun 3, 2026