【株式会社Rabee】 Svelte × Tailwind CSSのRabee UI、コンポーネントとサンプルを追加。AI最適化対応も行いました

カスタマイズを前提とした「UIコンポーネントの種」を追加。Claude Codeなど、AIツールによる情報の読み取りにも最適化しました。

株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、複数のコンポーネントとサンプルの追加及び、AIツールがRabee UIの情報をより正確に読み取れるように改善を行いました。今回のアップデートも含む全46種類のRabee UIコンポーネントは、以下から確認できます。

Rabee UI 公式ドキュメント

■ Rabee UIとは

Rabee UIとは、SvelteとTailwind CSSで構築されたUIコンポーネント集であり、カスタマイズして使うことを前提とした「コンポーネントの種」です。プロダクトごとに色やフォント、アニメーションなどを自由にカスタマイズすることで、ブランドらしさを表現するデザインシステムを小さいコストで構築できます。

■Rabee UIの特徴

・Svelte × Tailwind CSSで柔軟にカスタマイズできる

・コンポーネント単位でコピー＆ペーストして導入できる

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

・日本語利用を前提としたデザイン

・コードと一致したFigmaデータも公開中

■ コンポーネント「Sortable List」を新たに追加

Rabee UIは2025年5月のドキュメントページ公開以後、毎月のアップデートを継続しています。今月は新たに「Sortable List」コンポーネントを公開しました。

Sortable Listは、リスト内のアイテムをドラッグ＆ドロップで並び替えられるコンポーネントです。タスクの優先順位付けやメンバーの並び替えなど、ユーザーが直感的に操作できるUIの構築に役立ちます。

•

Sortable List https://rabeeui.com/docs/components/sortablelist

コンポーネント / Sortable List

■ サンプル「Checkbox Card」「Radio Card」を新たに追加

既存コンポーネントであるCheckbox、Radioを用いたサンプルとして、「Checkbox Card」と「Radio Card」の2種を追加しました。

Checkbox Cardは、チェックボックスをカード全体のクリック領域と組み合わせた実装例です。複数の選択肢をカード形式で並べる場面、たとえばプランの選択や設定項目の一覧表示などに活用できます。Radio Cardは、単一選択のケースに対応したサンプルです。どちらも、既存のCheckboxおよびRadioコンポーネントをベースに、より実務に近いUIの組み方を示しています。

•

Checkbox Card https://rabeeui.com/docs/samples/checkboxcard

•

Radio Card https://rabeeui.com/docs/samples/radiocard

サンプル / Checkbox Card, Radio Card

■ AIツールでRabee UIを参照しやすいよう、公式サイトをアップデート

Claude CodeをはじめとするAIツールがRabee UIの情報をより正確に活用できるよう、公式ドキュメントサイトのLLMO（LLM最適化）対応を行いました。LLMOとは、LLM（大規模言語モデル）がWebサイトの情報を正確に読み取り活用できるように最適化する取り組みです。具体的には、LLMがサイトの構造や内容を効率的に読み取るためのフォーマット「llms.txt」に対応したページを追加しました。

•

llms.txt https://rabeeui.com/llms.txt

•

llms-full.txt https://rabeeui.com/llms-full.txt

■ 今後の展望

私たちは今後も、Rabee UIの改善を継続して行います。実務で活用しながらアップデートを重ねることで、Rabee UIを単なるUIコンポーネント集ではなく、あらゆるプロダクト開発の基盤として強化していきます。

Rabee UI 公式ドキュメント

https://rabeeui.com/docs/components

■ Rabee UIの最新情報

Rabee UIに関する最新情報は以下で公開しています。

Rabee UI 公式ドキュメント

https://rabeeui.com/docs