UIライブラリ悩み中

現状

最近までは、Tailwind CSS + shadcn/uiをベースにWebアプリ開発で利用していました。

Material UIを使った現場で仕事していたことがありますが、その際にデザインドキュメントを把握し、修正するのが大変に感じていた時期がありました。

それがきっかけで「デザイン（見た目）を持たず、振る舞い（機能）だけを提供するライブラリ」であるヘッドレスUIの思想が好きになり、採用していました。

それプラス、自前でベースのコード自体も管理することで、プロジェクトごとにUIコンポーネント設計をカスタマイズしやすい、という理由でshadcn/uiを採用していました。 （あとは、自作デザインシステムへの憧れもあった、という理由もあります）

しかし、最近になって、流石にAtomsレベルの要素を自前のプロジェクトでそもそも管理したくないよね、と思ってきました。

なので、代わりとなる代替ライブラリを探しています、というメモです。

気になっているもの

まずは、基本的にReact環境での相性がよいのが大前提です。

Tailwind CSSでのコンポーネントカスタムの体験がスムーズだと感じているので、Tailwind CSSベースで拡張可能かつ、内部でヘッドレスUIを採用しているライブラリが理想です。 また、アニメーション実装にはMotionを採用したいので、それとの相性が良いものを探しています。

ただ、AI時代のこういったUI周りの実装がどう変わっていくか不透明なので、Reactと相性が良ければ、とりあえず任意のUIライブラリを探しています。

どっちかというと、これからはUIコンポーネントは開発者体験よりデザインが、プロダクトの性質にあっている高品質なものがあった方が嬉しいですね。

HeroUI v3 (beta)

Tailwind CSS v4 + React Ariaベースのコンポーネントライブラリ。 アニメーションはmotionを採用しているので、私が好きなライブラリ群と相性が良いです。 今のところ一番気になっていて、最近はちょこちょこv3-betaを利用しています。

daisy UI

こちらも、TailwindCSSベースで書かれており、それがラップして管理されています。

ただ、元々の開発がvueベースからなのか、あまりreactライクではない印象があるので触っていません。

Material UI

日本人が見やすく、高品質なUIライブラリといえば、やはりMaterial UIが挙げられるのではないでしょうか

つぶやき

shadcn/ui + tailwindcss + motionとかだと、海外ではいくつかラップしているUIコンポーネント集が2024〜2025年にかけていくつか出てましたね