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

株式会社Rabee（本社：東京都渋谷区、代表取締役：上松 勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、新たなコンポーネントとサンプルの追加、既存サンプルのアップデート、変更履歴ページの公開を行いました。

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

Rabee UIの特徴 - Svelte × Tailwind CSSで柔軟にカスタマイズできる - コンポーネント単位でコピー＆ペーストして導入できる - ダークモード・ライトモードに対応 - 日本語利用を前提としたデザイン - コードと一致したFigmaデータも公開中

新コンポーネント「Link」を追加 今月は新たに「Link」コンポーネントを公開しました。Linkは、本文中のテキストリンクを表示するためのコンポーネントです。「primary」「secondary」の2つのバリアントを切り替えられるほか、disabled状態にも対応しています。 target="_blank" を指定した別タブで開くリンクには、外部リンクアイコンを自動で表示するほか、セキュリティ・パフォーマンスに配慮した rel="noopener noreferrer" も自動付与します。

新サンプル「Pricing」を追加 サンプルとして、料金プランを並べて表示する「Pricing」を新たに追加しました。複数のプランをカード形式で並べ、月払い・年払いの切り替えにも対応しているレイアウトの例です。

既存コンポーネント「Button」のLoadingサンプルを更新 既存コンポーネント「Button」のLoading状態のサンプルを、連打防止パターンに刷新しました。今回の刷新により、フォーム送信中の二重送信を防ぐ実用的な実装例として確認できるようになっています。

変更履歴ページを公開 Rabee UIのドキュメントサイトに、リリースごとの変更点をまとめた「変更履歴」ページを公開しました。新しく追加されたコンポーネント・サンプル、変更点、修正点などを時系列で確認できます。