Svelte × Tailwind CSSのRabee UI、コンポーネントとサンプルを追加。AI最適化対応も行いました
2026/3/26 3:26 PR TIMES
[画像1: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-3e9bd6e1208f025af333e7bd55cdc630-1800x945.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
株式会社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データも公開中
[画像2: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-ce78a37ddd604b7bdf53fed197b6b294-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
[画像3: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-3dcbb693b3e4c87c7c03573b38509115-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
■ コンポーネント「Sortable List」を新たに追加
Rabee UIは2025年5月のドキュメントページ公開以後、毎月のアップデートを継続しています。今月は新たに「Sortable List」コンポーネントを公開しました。Sortable Listは、リスト内のアイテムをドラッグ＆ドロップで並び替えられるコンポーネントです。タスクの優先順位付けやメンバーの並び替えなど、ユーザーが直感的に操作できるUIの構築に役立ちます。
- Sortable List https://rabeeui.com/docs/components/sortablelist
[画像4: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-28c4f3ef38d1ad464dc043b87708e4e8-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]コンポーネント / 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
[画像5: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-d196ab24076c396b43870eea74d2b728-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]サンプル / 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
Rabee UI Figma
https://www.figma.com/community/file/1479376628733075423
Rabee UI Discordコミュニティ
https://discord.com/invite/VjtgZ4dkQa
■ 株式会社Rabeeについて
株式会社Rabeeは、受託開発・自社開発の豊富なノウハウを活かして、高速かつ高品質なWebプロダクト開発を行う会社です。あなたの思い描く「ほしい」「つくりたい」「届けたい」をともに実現します。会社名：株式会社Rabee
代表者名：上松勇喜
所在地：東京都渋谷区渋谷３丁目２６−２０ 関電不動産渋谷ビル１０F
設立：2018年8月
事業内容：受託開発・自社サービス開発・運用
https://rabee.jp/
[画像6: https://prcdn.freetls.fastly.net/release_image/97622/24/97622-24-3048b11c6e77a4bb0d0d1154697c356f-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
企業プレスリリース詳細へ
PR TIMESトップへ
記事提供元：タビリス
