Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか ...

konkarin
October 29, 2024
400

Radix UIとArk UIを併用したマルチフレームワーク対応デザインシステムの道はあるか / multi-framework-designsystem-with-arkui-and-radixui

konkarin

October 29, 2024
Tweet

Transcript

  1. スタイルを持たないアクセシブル(a11yに準拠した)なUIライブラリのこと。 1. Headless UI ◦ ちょっと数が少なめ‧‧‧。 2. Radix UI ◦

    王道。すでにCRMで採⽤している。 ◦ Radix Vueが有志で作られている。実質マルチフレームワーク対応! 3. Ark UI ◦ Chakra UIの素。マルチフレームワーク対応! ヘッドレスUIライブラリ
  2. スタイルを持たないアクセシブル(a11yに準拠した)なUIライブラリのこと。 1. Headless UI ◦ ちょっと数が少なめ‧‧‧。 2. Radix UI ◦

    王道。すでにCRMで採⽤している。 ◦ Radix Vueが有志で作られている。実質マルチフレームワーク対応! 3. Ark UI ◦ Chakra UIの素。マルチフレームワーク対応! ヘッドレスUIライブラリ
  3. フレームワーク間でスタイル共有したい。 1. Utility系CSS(TailwindCSS, UnoCSS, ...) ◦ CRMで採⽤。 2. CSS Modules

    ◦ 弊社で事例なし。 3. CSS in JS(Emotion, Kuma UI, PandaCSS, ...) ◦ 弊社で事例なし。でも良さげ。 スタイルの統⼀
  4. フレームワーク間でスタイル共有したい。 1. Utility系CSS(TailwindCSS, UnoCSS, ...) ◦ CRMで採⽤。とりあえず試す。(筆者ほぼ使ったこと無い 2. CSS Modules

    ◦ 弊社で事例なし。 3. CSS in JS(Emotion, Kuma UI, PandaCSS, ...) ◦ 弊社で事例なし。でも良さげ。 スタイルの統⼀