🐈
ReactのUIならHeroUIを使うべし！
はじめに
昨年、こちらの記事を書かせていただきました。
当時はNextUIでしたが、いつの間にか名前が変わっていたため再度記事を作成させていただきます。
HeroUIとは
HeroUIとは、TailwindcssとFramer Motionをベースに作成されたUIライブラリです。ボタンからアコーディオンや認証コード入力欄、D&D可能なモーダルやトーストなどもあります。コンポーネントの種類の多さやカスタマイズ性からも、これを使用しておけば困ることはあまりないかと思います。
利用できるプロジェクト
以下のプロジェクトであれば、利用できます。
- Vite
- Next.js
- Remix
- Astro
- Laravel
主にReact環境であれば、このライブラリを利用できます。
Next.jsの場合はGitHubからテンプレートのクローンができたりします。詳細は公式ドキュメントを参照ください。
生成AI機能
UIが簡単に構築できる生成AIといえばVercelのv0が話題ですが、実はHeroUIでも同様のことができます。
例えば公式ドキュメントにはない、右クリックでのみ開くドロップダウンが作成できたりします。これによって、右クリックメニューが簡単に作成できます。
まだまだアップデート中
このライブラリ、特に今年に入ってから大規模なアップデートが行われました。モーダルダイアログでD&Dが可能になったり、認証コード向けの入力欄が作成されたり、トーストが作成されたりなどなど。。。見た目はどのライブラリよりも先進的で、既に完成度がかなり高い状態ですが開発はまだまだ進行しています。日本語ドキュメントが無いのは欠点ですが、Tailwindcssベースで作られているだけあり、直感的にコードの編集が可能です。
「ライブラリに頼りたいけど、ありがちなのっぺりとした見た目にはしたくない」という方にはぴったりだと思いますので、よければぜひ試してみてください！
Discussion