Rabee UIが新コンポーネント「Link」と「Pricing」を追加、進化するデザインシステム

Rabee UIの進化

株式会社Rabee（東京都渋谷区）は、SvelteとTailwind CSSを融合させたUIコンポーネント集「Rabee UI」に新しいコンポーネントやサンプルを追加しました。今回のアップデートでは、全51種類のコンポーネントの中から、特に注目の「Link」と「Pricing」が登場しました。

Rabee UIとは？

Rabee UIは、SvelteとTailwind CSSの組み合わせによって構築された、本格的なUIコンポーネント集です。このプラットフォームでは、プロダクトごとに自由にカスタマイズが可能で、色やフォント、アニメーションを使って個性を反映できます。また、コストを抑えつつブランド特性を強調するためのデザインシステムが提供されています。

新たに追加された「Link」コンポーネント

今回新として追加された「Link」コンポーネントは、本文中にテキストリンクを簡単に表示するために設計されています。機能としては、'primary'と'secondary'の2つのバリエーションに切り替えられ、さらにdisabled状態にもしっかり対応しています。これにより、ユーザーは特定の状況に応じたスタイルを選択できます。

特筆すべきは、別タブで開くリンクには外部リンクアイコンが自動で設定され、セキュリティ面でも、rel属性に'noopener noreferrer'が自動で付与される等、ユーザビリティに配慮した設計がされています。

Linkコンポーネントの詳細

新サンプル「Pricing」の追加

また、新たに追加されたサンプル「Pricing」では、料金プランをカード形式で視覚的に提示することが可能となりました。このサンプルは、月払い・年払いのプランが選べるフレキシブルなデザインになっています。特に、各プランに対する機能一覧の表示方法が優れており、SaaSや有料サービスの料金ページ作成に役立つ構成となっています。

Pricingサンプルの詳細

コンポーネント「Button」の改良

既存の「Button」コンポーネントに関しても革新がありました。特に、Loading状態のサンプルが更新され、フォーム送信中に発生する二重送信を防ぐ「連打防止パターン」が組み込まれました。これにより、実際の運用に則したより実用的な実装例が用意されています。

Button（Loading）の詳細

変更履歴ページの公開

また、Rabee UIのドキュメントにおいて、リリースごとの変更点をまとめた「変更履歴」ページが新たに公開されました。こちらでは、新しく追加されたコンポーネント・サンプルや修正点、必要な移行情報などを簡単に確認することができます。

変更履歴の詳細

今後の展望

今後もRabeeは、UIコンポーネント集の改善を進め、実務で使える製品開発の基盤としてRabee UIを更に強化していく方針です。私たちは、皆さんの「ほしい」「つくりたい」「届けたい」を実現するために、共に歩んでいきます。

公式ドキュメントやFigmaデータも公開中ですので、ぜひチェックしてみてください。

Rabee UI公式ドキュメント
Rabee UI Figma

株式会社Rabeeについて

株式会社Rabeeは、受託開発と自社開発の豊富な経験を踏まえ、高速かつ高品質なWebプロダクトの開発を行っています。株式会社Rabeeは、あなたのアイデアを実現するためのパートナーです。

会社名：株式会社Rabee
設立：2018年8月
所在地：東京都渋谷区渋谷3丁目26-20関電不動産渋谷ビル10F
公式サイト：Rabee公式サイト