ダークモード、まだ自前で作ってる？「Rabee UI」は全部対応済み

どんなアプリか

Rabee UI は、Svelte プロジェクト用の UI コンポーネント集です。公式ドキュメントのページから必要なコードを自分のプロジェクトにコピーして使います。株式会社Rabee が 2025年5月27日にコードを公開しました。

Rabee UIは、AI時代のプロダクト開発を前提とした、プロジェクトごとにカスタマイズ可能な「UIコンポーネントの種」として機能します。

株式会社Rabee、PR TIMES のプレスリリース（2025-05-27）

見た目は Tailwind CSS のクラスを組み合わせて調整でき、Tailwind の設定ファイルを上書きするとプロジェクト全体のデザイントークンをまとめて変えられます。すべてのコンポーネントがダークモードとライトモードの切り替えに対応しています。

コンポーネントのサイズや余白は、日本語で使ったときの見え方に合わせて調整されています。実際のコードと同じ仕様を再現できる Figma ファイルも公開されており、Figma の Variables 機能を使ってデザイナーとエンジニアが同じデザインシステムを共有する作りです。

作り手は受託開発と自社サービス開発を手がける会社で、似た UI コンポーネントを何度も作ることや、ホバー時・クリック時・エラー時などの QA にかかる手間を課題として挙げています。基本的な QA を済ませたコンポーネントを土台にする、という位置づけです。

入れる前に

2025年5月27日の公開時点のコンポーネントは、Badge、Button、Checkbox、Input、InputFile、Label、Radio、Switch、Table、Textarea の10種類で、フォーム関連が中心です。コンポーネントは今後も増やす予定とされ、追加予定のもののデザインは Figma Community で先に公開されています。

コンポーネントは Storybook（rabeeui.com/docs）で確かめられます。最新情報は LP、Storybook、Figma、Discord コミュニティで公開されています。