🎉

祝🎉メジャーリリース・React18対応！改めて紹介するRadix UI

2022/07/23に公開

つい先日、Radix UIのバージョンが1.0.0に更新されました。

概要

React 18の対応が待たれていた^[1]Radix UIですが、ついにReact 18対応を引っ提げてメジャーリリースが公開されました。

これに伴って、軽めにRadix UIの紹介をしたいと思います。

公式の手順を踏みましょう。

以上になります。

スタイリングの手段は問いません。もちろん、tailwindcssにも対応しています。

documentationの各Componentsページの実装が参考になります。

Radix UIはデフォルトでスタイルが適用されていません。ただ、やっぱりある程度のスタイルがついていてほしいというのが正直なところだと思います。

そんなときに頼りになるのが、公式が提供しているdesign-systemです。

公式サイトの構築にも用いられています（以下、抜粋）。

どんなコンポーネントが使えるのかは、こちらを参考にしてください。

Radix UIの紹介でした。メジャーリリースめでたいです。

Radix UIはコンポーネントの種類が豊富で、Hover CardやNavigation Menuといった変わり種もあって、実装例を眺めているだけでも創作意欲を駆り立てられます。

また、UtilitiesのPortalやSlotは、createPortalやcloneElementのショートハンドとして便利です。特にSlotはこちらでも紹介してるように、
単なるショートハンドにはとどまらない利便性を持っています。

現在、近日公開となっているコンポーネントもあり、今後ますます便利になっていくと思います。覇権を取り切ってしまう前に採用してみてはいかがでしょうか。

脚注