Svelte × Tailwind CSSのRabee UI、コンポーネント「Link」とサンプル「Pricing」を追加。変更履歴ページも公開しました

カスタマイズを前提とした「UIコンポーネントの種」を提供中。LinkとPricingを追加し、リリースごとの変更点をまとめた変更履歴ページも公開しました。



[画像1: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-8ec9bb7b962d038a222429f527edb654-1800x945.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]


株式会社Rabee（本社：東京都渋谷区、代表取締役：上松 勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、新たなコンポーネントとサンプルの追加、既存サンプルのアップデート、変更履歴ページの公開を行いました。今回のアップデートも含む全51種類の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/28/97622-28-b95c5ddbc35d508e0c5928fecf91eca7-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/28/97622-28-c19ab09f40c86610ebd93ed2a887f033-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

■ 新コンポーネント「Link」を追加

今月は新たに「Link」コンポーネントを公開しました。Linkは、本文中のテキストリンクを表示するためのコンポーネントです。「primary」「secondary」の2つのバリアントを切り替えられるほか、disabled状態にも対応しています。

target="_blank" を指定した別タブで開くリンクには、外部リンクアイコンを自動で表示するほか、セキュリティ・パフォーマンスに配慮した rel="noopener noreferrer" も自動付与します。手動での設定漏れを防ぎ、セキュアな実装をサポートします。
- Link https://rabeeui.com/docs/components/link

[画像4: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-485b41f9d09c513e575dd11b73ebc3cb-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
コンポーネント / Link

■ 新サンプル「Pricing」を追加

サンプルとして、料金プランを並べて表示する「Pricing」を新たに追加しました。複数のプランをカード形式で並べ、月払い・年払いの切り替えにも対応しているレイアウトの例です。おすすめのプランをアピールする表示や、それぞれのプランが持つ機能一覧の表示にも活用でき、SaaSや有料サービスの料金ページをそのまま組み立てられる構成になっています。
- Pricing https://rabeeui.com/docs/samples/pricing

[画像5: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-7739e517d9622e98aec35177cda420ea-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
サンプル / Pricing

■ 既存コンポーネント「Button」のLoadingサンプルを更新。フォームの二重送信を防ぐ「連打防止パターン」に刷新

既存コンポーネント「Button」のLoading状態のサンプルを、連打防止パターンに刷新しました。これまでは見た目の例として静的にローディング表示を行うサンプルでしたが、今回の刷新により、フォーム送信中の二重送信を防ぐ実用的な実装例として確認できるようになっています。
- Button（Loading） https://rabeeui.com/docs/components/button#heading-sub-9

[画像6: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-6bc1822430a7cff982d22d1e2a0250f8-2700x900.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
コンポーネント / Button（Loading）

■ 変更履歴ページを公開

Rabee UIのドキュメントサイトに、リリースごとの変更点をまとめた「変更履歴」ページを公開しました。新しく追加されたコンポーネント・サンプル、変更点、修正点、移行が必要な変更などをひとつのページから時系列で確認できます。
- 変更履歴 https://rabeeui.com/docs/changelog

[画像7: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-88648dfc1668744068a45c29f698cecb-2700x1560.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

■ 今後の展望

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

Rabee UI 公式ドキュメント
https://rabeeui.com/docs/components

Rabee UIで開発したプロダクト「Formee」
https://lp.formee.me/

■ 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/


[画像8: https://prcdn.freetls.fastly.net/release_image/97622/28/97622-28-1285fa3c10c8f0f7b997f6f1806b1d45-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]



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