Headless UI 是由 Tailwind Labs 推出的 無樣式 UI 元件庫，專為 React 與 Vue 框架設計。它提供了一系列完全可存取（accessible）、功能完整但不綁定樣式的互動元件，讓開發者能自由結合 Tailwind CSS 或其他設計系統，打造一致且靈活的前端體驗。

核心特色

  • 完全無樣式（Headless）設計：讓開發者完全掌控外觀與版型。

  • 100% 無障礙支援（A11y Ready）：所有元件預設符合 WAI-ARIA 標準。

  • 支援 React 與 Vue：可無縫整合至主流框架。

  • 與 Tailwind CSS 完美結合：樣式輕鬆客製化，維持一致設計語言。

  • 高互動性元件：包含 Dialog、Listbox、Menu、Popover、Tabs、Transition、Switch、Combobox 等。

  • 官方維護、持續更新：由 Tailwind 團隊親自開發，品質穩定。

 

常見應用元件

  • Dialog（模態視窗）

  • Popover（彈出提示）

  • Tabs（分頁切換）

  • Listbox / Combobox（選單與輸入框）

  • Transition（動畫過渡）

  • Switch / Checkbox / Radio Group（表單控制）

這些元件都內建完整的鍵盤操作邏輯與可存取性，開發者不需重新實作複雜互動。

 

總結來說，Headless UI 讓開發者能專注於設計與使用者體驗，不被樣式框架限制。它提供了所有前端互動的核心邏輯，並與 Tailwind CSS 緊密結合，是打造現代化網站的理想搭配。