Svelte × Tailwind CSSのRabee UI、「Markdown」のサンプルを新たに追加。既存コンポーネント2種もアップデート

カスタマイズを前提とした「UIコンポーネントの種」を提供中。Markdownのサンプルを追加公開し、より実務で活用しやすいコンポーネント集へ進化しました。



[画像1: https://prcdn.freetls.fastly.net/release_image/97622/23/97622-23-4dbae87caee7a778ead068d4dca3d0d2-2400x1260.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]


株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、サンプルを新たに公開しました。今回リリースしたサンプルも含む全43種類の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/23/97622-23-c31096ecc2c7c2dade1534d8378eaa90-3600x2080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]


[画像3: https://prcdn.freetls.fastly.net/release_image/97622/23/97622-23-5be0270e354e9ba33a668974f0a7088a-3600x2080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

■ サンプル「Markdown」を新たに追加

Rabee UIは2025年5月のドキュメントページ公開以後、毎月のアップデートを継続しています。今月も新たに「Markdown」のサンプルを追加しました。Markdownは、h1やulなどのHTML要素に対し、一貫したデザインを適用するためのスタイルのセットです。

また、既存コンポーネントである「Button」「Image Uploader」に改修を加え、より幅広いユースケースに対応できるようになりました。

具体的には、Buttonには新たに「Toggle Button」として、SNSのフォロー／フォロー解除のようにユーザーのアクションに応じて状態が切り替わるボタンの実装例を追加しました。Image Uploaderには、一度アップロードした画像を任意で取り消せる「Clearable」機能を追加しました。
- Markdown https://rabeeui.com/docs/samples/markdown
- Button https://rabeeui.com/docs/components/button
- Image Uploader https://rabeeui.com/docs/components/imageuploader

[画像4: https://prcdn.freetls.fastly.net/release_image/97622/23/97622-23-c19ff921b42f01ea5ebe9f71de7c4657-3600x2080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
サンプル / Markdown

[画像5: https://prcdn.freetls.fastly.net/release_image/97622/23/97622-23-7d16da1976daa9119abedb686ada5e1d-3600x2080.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
コンポーネント / Button, Image Uploader

■ 今後の展望

私たちは今後も、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/23/97622-23-f0015ff4ef57733760516ea9a00bf0a8-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]



PR TIMESプレスリリース詳細へ