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

Headless UIとは

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

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

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

新しく追加されたコンポーネントは以下の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!