Radix uiをApp routerと一緒に使ってみる

Radix UIをApp routerで使う時の備忘録

Radixにはthemesとprimitivesが存在している。これらには共通しているコンポーネントもあるが、themesにはFlexやGridなどのレイアウトを操作するコンポーネントも存在している。
どちらもRSCで動くのかとか細かいところはわかっていない...

themes

Radix Themes is an open-source component library optimized for fast development, easy maintenance, and accessibility. Maintained by @workos.

primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

今回はFlexやGridを使いたいので、themesを使ってみる。

早速、環境構築でcssのimportを忘れていたらcssが効かなかった

import '@radix-ui/themes/styles.css';

Boxとかに指定できるpropsのwidthやheightは1 ~ 9までのenumでの指定になる。
https://www.radix-ui.com/themes/docs/theme/layout#scaling

64px以上の大きさをwidthやheigthに指定するにはcssでスタイルをあてるか、styleをインラインで当てるしかなさそう？
Radixのドキュメントでもstyleにあてている

css moduleに指定するのかコンポーネントのpropsで指定するのか悩みそうなので、一旦採用をやめる。