Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」をリリースしました

2025/05/27/ 14:09

カスタマイズを前提とした「UIコンポーネントの種」を提供。プロダクトの要件に合わせてカスタマイズできるUIコンポーネントによって、品質とスピードを両立した開発を実現します。

- 株式会社Rabee

受託開発事業・自社サービス事業を展開する株式会社Rabee（本社：東京都渋谷区、代表取締役社長：上松勇喜、以下「Rabee」）は、SvelteとTailwind CSSを利用したUIコンポーネント集「Rabee UI（読み：ラビーユーアイ）」のコードをリリースしました。

今回リリースしたコンポーネントは、以下から確認できます。

「Rabee UI」Storybook
https://rabeeui.com/docs

■ Rabee UIとはRabee UIとは、Svelteプロジェクト用に設計されたUIコンポーネント集です。公式ドキュメントページから必要なコードを自分のプロジェクトにコピーするだけで使いはじめられます。

「Rabee UI」LP
https://rabeeui.com

■ Rabee UIコンポーネントの特徴Rabee UIは、ただのUIコンポーネント集ではなく、デザインと実装の連携によってプロダクト開発を加速させるツールです。たとえば、管理画面やLPの制作など、品質の高いUIをスピーディーに開発したいシーンで大きな効果を発揮します。
Svelte × Tailwind CSSで柔軟にカスタマイズ可能Tailwind CSSを採用しているため、既存のクラスを組み合わせるだけでデザインを柔軟に調整できます。また、Tailwindの設定ファイルを上書きすることで、プロジェクト全体のデザイントークンを一括で変更することもできます。
ダークモード・ライトモードに対応すべてのコンポーネントがダークモード・ライトモードの切り替えに対応しています。プロダクト立ち上げの段階から、コストをかけずにダークモードを提供することが可能です。
日本語利用を前提としたデザインUIコンポーネントのサイズや余白は、日本語で使ったときに美しく見えるよう調整されています。他言語をベースとしたコンポーネントと比較して、導入や細かなカスタマイズがよりスムーズです。
コードと一致したFigmaファイルも公開中実際のコードと同じ仕様を再現できるFigmaファイルを公開しています。FigmaのVariables機能を活用しており、デザイナーとエンジニアが同じデザインシステムを共有することで、デザインから実装までがシームレスに繋がります。

■ Rabee UIで公開中のコンポーネント今回のリリースでは、10種類のフォーム（Input）関連コンポーネントを公開しました。コンポーネントは今後も拡充していく予定です。

「Rabee UI」Storybook
https://rabeeui.com/docs
Badge

Button

Checkbox

Input

InputFile

Label

Radio

Switch

Table

Textarea

「Rabee UI」Storybook
Rabee UIコンポーネントのイメージ画像

また、Figma Communityでは、今後追加予定のコンポーネントのデザインも先行公開しています。

「Rabee UI」Figma
https://www.figma.com/community/file/1479376628733075423

■ Rabee UIが受託開発にもたらすメリットRabeeは、自社サービス開発・受託開発をどちらも手がけるWeb制作会社です。
受託開発においては、企業向けSaaSから小学生が利用するモバイルアプリまで、多種多様なタイプのプロダクトを開発してきました。その中で、以下のような課題が明確になってきました。

■ 従来のプロダクト開発における課題
1. 似たようなUIコンポーネントを何度も開発している
2. プロジェクト間のルールの不統一
3. 「ホバー時」「クリック時」「エラー時」などのQAコストが膨大

こうした課題に対して、Rabee UIの導入はたくさんのメリットをもたらします。
1. デザインシステムをスピーディーに構築できるRabee UIは、AI時代のプロダクト開発を前提とした、プロジェクトごとにカスタマイズ可能な「UIコンポーネントの種」として機能します。これにより、新しいプロジェクトでも、すぐにデザインシステムを構築、納品することが可能です。
スピーディーにデザインシステムを構築・納品できる

デザイン規則のドキュメントを迅速に制作できる

Tailwind CSSを用いたカスタマイズによって、ブランドらしさも表現できる

2. 新規機能・画面の追加も迅速に対応できる基本的なUIコンポーネントが一通り揃うため、新しい画面を追加する際も、既存のコンポーネントを活用して迅速な実装が可能です。
コンポーネントの再利用によって開発工数を削減できる

一貫性のあるUIを制作できる

レスポンシブ対応を自動化できる

3. 一定以上の品質を担保できる基本的なQAが完了しているコンポーネントをベースにして開発することで、一定以上の品質を担保しながらスピーディーにプロダクトを作ることができます。
テスト済みのコンポーネントによって安定した動作を担保できる

QAコストを削減できる

■ Rabee UIの最新情報はこちらRabee UIに関する最新情報は、以下で公開しています。

Rabee UI LP：
https://rabeeui.com

Rabee UI Storybook：
https://rabeeui.com/docs

Rabee UI Figma：
https://www.figma.com/community/file/1479376628733075423

Rabee UI Discordコミュニティ：
https://discord.com/invite/VjtgZ4dkQa