Headless UIとは？Accessible Headless Components

ページ内ナビ

概要

Headless UIはDialog、Menu、Listbox、Combobox等のUI behaviorとaccessibilityを提供し、visual stylingをapplication側に委ねるheadless component libraryです。ReactとVue向けpackageを持ち、Tailwind CSSと組み合わせやすい設計ですが、独自CSSやdesign systemでも利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

Dialog・Menu・Listbox等のinteractionをunstyled componentとして再利用する

componentはvisual themeを固定せず、open/close state、selection、focus movement、keyboard interaction等のbehaviorを提供します。product固有のCSSやutility classを重ねられます。

出典：[1][2]

accessibilityを保ちながら独自design systemへ組み込む

READMEはfully accessibleかつunstyledであることを中心に据えています。見た目とlayoutはapplication側で決め、interaction semanticsをcomponent側へ任せる構成を取れます。

出典：[1]

React packageをTailwind CSSや既存frontend stackへ追加する

@headlessui/reactはReact 18/19をpeer dependencyとして持ち、既存React applicationへ個別導入できます。Tailwind CSSとの統合を想定していますが、library自体がutility CSSを必須にはしません。

出典：[2]

向いている用途

UIのvisual designは自前で保ちつつaccessible behaviorを再利用したいfrontend teamに向く

design tokenやTailwind utilityを自社で管理し、完成済みthemeよりも低レベルなinteraction componentを組み合わせたいdesign systemに適します。

出典：[1]

導入前の確認

2.2.10はReact 18/19とReact DOM 18/19をpeer dependencyとして要求する

package metadataはReactとReact DOMに^18 || ^19 || ^19.0.0-rcを要求します。legacy React applicationではupgrade前にruntime互換性を確認してください。

出典：[2]

2.2.10はhydration時PortalとFragment propsの不具合を修正する

2.2.10ではhydration中にPortalをrenderしない修正と、Symbol(react.lazy)に起因するFragment props errorの修正が入っています。SSR/hydrationを使うapplicationではpatch levelも確認してください。

出典：[3]

参考にした公式資料

[1]Headless UI README(2026-10-05)
[2]@headlessui/react 2.2.10 package metadata(2026-10-05)
[3]@headlessui/react 2.2.10 release(2026-10-05)
[4]Headless UI MIT license(2026-10-05)

編集部からの補足

見た目を完成品として提供するcomponent libraryではありません。project側でstyleを定義しつつ、focus・keyboard操作・ARIA等の実挙動はbrowser testでも確認してください。

3ステップで試す

1
Headless UI React 2.2.10を固定して導入する
一時npm projectへHeadless UI Reactとpeer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/headlessui.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @headlessui/react@2.2.10 react@19.2.0 react-dom@19.2.0
2
package versionを確認する
インストールされたpackage metadataがreview対象versionと一致することを確認します。
test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@headlessui/react/package.json')).version)")" = '2.2.10'
3
主要component exportを確認する
browserを起動せず、Dialog・Menu・Listboxの主要exportが利用可能であることを確認します。interactionとaccessibilityはbrowserで別途検証してください。
test "$(node --input-type=module -e "import * as H from '@headlessui/react'; console.log(['Dialog','Menu','Listbox'].every(k=>k in H))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

28,767 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 28

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
headless-ui
headlessui
vue
accessibility
a11y
tailwindcss
components

Stars: 28,767
Forks: 1,208
Watchers: 163
Open Issues: 87
Contributors: 74
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/04/13