tailwindcssで作成された美しいUIコンポーネント Headless UI v1.0がリリースされました！Headless UIとは

Headless UI v1.0がリリースされました。

Under the hood, this release is powered by Headless UI — the unstyled, accessibility-focused component library we started working on last fall.

Today, we’re releasing Headless UI v1.0 which more than doubles the amount of included components 🥳https://t.co/xt4XbUn56r

— Adam Wathan (@adamwathan) April 14, 2021

Headless UIとは

Headless UI は、UIのサンプルディレクトリで、Tailwind CSSと融合するように設計されたUIコンポーネントを公開してます。”npm”もしくは”yarn”から”Headless UI”をインストールしたら、Headless UIのウェブサイトを訪れてみてください。簡単に美しいＵＩを利用することができます。

Headless UI 1.0をリリースするにあたり、新着情報として、Reactライブライに４つのコンポーネント、さらにVueに５つの新しいコンポーネントを追加したと発表しています。👍

新しく追加されたコンポーネント

新しく追加されたコンポーネントは以下の5つです。ポップオーバーなんて良さそうですね。

• Diag(modal）
• Disclosure
• Radio Group
• Popover
• TransitionRoot and TransitionChile(for Vue)

Headless UIのインストール

Headless UIのインストールは、npmとyarnからインストールすることができます。

npm

npm install @headlessui/react

yarn

yarn add @headlessui/react

あとは、Headless UIのウェブサイトを訪れるだけで、簡単にUIコンポーネントを利用することができます。

2021年4月5日現時点で利用できるのは、8つのコンポーネントが公開されています。今後、バージョンを重ねる毎にコンポーネントの数も増え、充実していくことでしょう。楽しみですね。

今日は快晴！

今日も一日頑張りましょう！

Have a great day!