Svelte × Tailwind CSS 的 Rabee UI 新增「Link」組件與「Pricing」範例,並公開變更歷程頁面
Rabee Co., Ltd. 更新了 Svelte × Tailwind CSS UI 組件庫「Rabee UI」,新增了組件、改善範例並推出變更歷程頁面。
📋 文章處理履歷
- 📰 發表: 2026年5月27日 13:05
- 🔍 收集: 2026年5月31日 23:12(發表後106小時7分鐘)
- 🤖 AI分析完成: 2026年6月2日 00:35(收集後25小時22分鐘)
Rabee Co., Ltd.(總部:東京都澀谷區,執行長:上松勇喜)更新了 Svelte × Tailwind CSS UI 組件庫「Rabee UI」,新增了組件與範例、更新了既有範例,並公開了變更歷程頁面。
## 何謂 Rabee UI?
Rabee UI 是由 Svelte 和 Tailwind CSS 建構的 UI 組件集,定位為「組件之種」,旨在供開發者進行客製化使用。透過針對每個產品自由調整顏色、字體與動畫,能以低成本建構出展現品牌個性的設計系統。
## Rabee UI 特點
- 透過 Svelte × Tailwind CSS 進行靈活客製化
- 可按組件單位進行複製貼上以導入
- 支援深色與淺色模式
- 專為日語環境設計
- 同步公開與程式碼一致的 Figma 檔案
## 新增組件「Link」
本月新發布了「Link」組件,用於顯示內文中的文字連結,並提供「primary」與「secondary」兩種變體供切換,同時支援 disabled 狀態。
對於設定為 target="_blank" 的新分頁連結,系統會自動顯示外部連結圖示,並為安全與效能自動添加 rel="noopener noreferrer"。
## 新增範例「Pricing」
新增了名為「Pricing」的範例,以並排顯示價格方案。這是一個支援月繳與年繳切換的卡片式版面範例。
## 更新既有組件「Button」的 Loading 範例
既有「Button」組件的 Loading 狀態範例已更新為「防止連續點擊」模式。透過此次更新,開發者可參考此實作範例來防止表單傳送時的重複提交。
## 公開變更歷程頁面
在 Rabee UI 的文件網站上公開了「變更歷程」頁面,匯整了每次發布的變更內容。使用者可按時間順序確認新追加的組件、範例、變更點及修正事項。
## 何謂 Rabee UI?
Rabee UI 是由 Svelte 和 Tailwind CSS 建構的 UI 組件集,定位為「組件之種」,旨在供開發者進行客製化使用。透過針對每個產品自由調整顏色、字體與動畫,能以低成本建構出展現品牌個性的設計系統。
## Rabee UI 特點
- 透過 Svelte × Tailwind CSS 進行靈活客製化
- 可按組件單位進行複製貼上以導入
- 支援深色與淺色模式
- 專為日語環境設計
- 同步公開與程式碼一致的 Figma 檔案
## 新增組件「Link」
本月新發布了「Link」組件,用於顯示內文中的文字連結,並提供「primary」與「secondary」兩種變體供切換,同時支援 disabled 狀態。
對於設定為 target="_blank" 的新分頁連結,系統會自動顯示外部連結圖示,並為安全與效能自動添加 rel="noopener noreferrer"。
## 新增範例「Pricing」
新增了名為「Pricing」的範例,以並排顯示價格方案。這是一個支援月繳與年繳切換的卡片式版面範例。
## 更新既有組件「Button」的 Loading 範例
既有「Button」組件的 Loading 狀態範例已更新為「防止連續點擊」模式。透過此次更新,開發者可參考此實作範例來防止表單傳送時的重複提交。
## 公開變更歷程頁面
在 Rabee UI 的文件網站上公開了「變更歷程」頁面,匯整了每次發布的變更內容。使用者可按時間順序確認新追加的組件、範例、變更點及修正事項。
常見問題
Rabee UIとはどのようなサービスですか?
Rabee UIは、SvelteとTailwind CSSで構築されたUIコンポーネント集です。カスタマイズを前提としており、プロダクトごとのブランドデザインを低コストで構築できます。
今回新たに追加されたコンポーネントは何ですか?
テキストリンクを表示するための「Link」コンポーネントが追加されました。外部リンクへの自動アイコン表示や、セキュリティに配慮した属性の自動付与機能があります。
Rabee UIの最新アップデートに含まれるサンプルは何ですか?
料金プランを並べて表示する「Pricing」サンプルが追加されました。月払い・年払いの切り替えレイアウトなど、SaaSの料金ページ制作に活用できます。
既存の「Button」コンポーネントはどのように更新されましたか?
Loading状態のサンプルが、フォームの二重送信を防ぐ実用的な「連打防止パターン」として刷新されました。
Rabee UIの更新情報はどこで確認できますか?
公式ドキュメントサイトに新設された「変更履歴」ページにて、リリースごとの新機能や修正点を確認可能です。