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

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

株式会社Rabee

2026年5月27日 13時05分

株式会社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データも公開中

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

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

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

Link https://rabeeui.com/docs/components/link

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

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