Rabee UI とは

Rabee UIは、Svelte × Tailwind CSSで構築された、カスタマイズを前提としたUIコンポーネント集です。必要なUIコンポーネントのコードを自分のプロジェクトにコピーするだけで、素早く、簡単にUIを構築できます。

Rabee UI

Svelte × Tailwind CSSでカスタマイズ

Rabee UIは、カスタマイズして使用することを前提とした「UIコンポーネントの種」です。デザインを変更したいときは、Tailwind CSSのクラスを組み合わせるだけで柔軟に調整できます。また、Tailwind CSSの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。

コンポーネント単位で使える

Rabee UIはUIライブラリではなく、コードをコンポーネント単位でコピー＆ペーストして使える「UIコンポーネント集」です。プロジェクトごとに、必要なUIコンポーネントのみを選んで使うことができます。

ダークモード・ライトモードに対応

すべてのコンポーネントがダークモード・ライトモードの切り替えに対応しています。プロダクト立ち上げの段階から、コストをかけずにダークモードを提供することができます。

日本語利用のためのデザイン

UIコンポーネントのサイズや余白は、日本語で使ったときに美しく見えるよう調整されています。他言語をベースとしたコンポーネントと比較して、導入や細かなカスタマイズをスムーズに進められます。

コードと一致したFigmaファイル

実際のコードと同じ仕様を再現できるFigmaファイルを公開しています。FigmaのVariables機能を活用しており、デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスにつながります。