Svelte × Tailwind CSS的Rabee UI新增4種範例，顏色定義也更清晰。

Rabee股份有限公司（總部：東京都澀谷區，代表董事：上松勇喜）針對其Svelte × Tailwind CSS UI組件集「Rabee UI」進行了更新，包括新增範例和刷新顏色定義。
包括本次更新在內的所有49種Rabee UI組件，皆可從以下連結確認。
Rabee UI 官方文件

■ 什麼是Rabee UI？
Rabee UI是一個以Svelte和Tailwind CSS建構的UI組件集，其設計理念是作為可供客製化的「組件種子」。透過針對每個產品自由客製化顏色、字體和動畫，開發團隊能夠以較低的成本建立具品牌特色的設計系統。

■ Rabee UI的特點
・Svelte × Tailwind CSS，提供靈活的客製化功能
・可透過複製貼上方式導入組件
・支援深色模式和淺色模式
・設計考量日語使用情境
・提供與程式碼一致的Figma設計檔

■ 新增4種有助於建立管理介面和SaaS的範例
自2025年5月文件頁面發布以來，Rabee UI持續每月更新。本月新增了「Admin Layout」、「Authentication」、「Error Layout」和「Header Snippet」四種範例。這些範例皆旨在支援產品開發中頻繁使用的頁面建構。
Admin Layout是包含側邊欄和頁首的通用管理介面佈局範例。Authentication提供了登入和註冊所需的頁面範例。Error Layout提供了404（頁面不存在）和500（伺服器錯誤）等錯誤頁面範例。Header Snippet是Web服務中易於使用的頁首範例。
Admin Layout https://rabeeui.com/docs/samples/adminlayout
Authentication https://rabeeui.com/docs/samples/authentication
Error Layout https://rabeeui.com/docs/samples/errorlayout
Header Snippet https://rabeeui.com/docs/samples/header
範例 / Admin Layout, Header Snippet
範例 / Authentication, Error Layout

■ 將現有組件「Badge」和「Dialog」重構為「Chip」和「Modal」
現有組件中的兩種已更新，使其在實際應用中更具實用性。

「Badge」更新為「Chip」
原先提供的「Badge」組件已更名為「Chip」，並擴充了顏色和視覺樣式的種類。現在可以根據狀態顯示或標籤顯示等用途，靈活選擇設計。
Chip https://rabeeui.com/docs/components/chip
組件 / Chip

「Dialog」更新為「Modal」
原先提供的「Dialog」組件已更名為「Modal」，並重新審視了設計。過去的Dialog在一個組件中同時提供了模態視窗功能和對話框顯示功能。新的Modal將組件功能專注於「作為模態視窗顯示」，使得模態視窗上顯示的內容可以自由變更。這使其可用於各種模態視窗應用。
Modal https://rabeeui.com/docs/components/modal
組件 / Modal

■ 顏色定義全面刷新
Rabee UI提供的顏色變數命名已全面刷新。透過整理使其用途和層次更為明確，更容易在程式碼中找到目標變數。同時，也新增了Input類組件的邊框顏色，以及鍵盤操作時顯示的焦點環顏色。新的CSS內容可在以下文件中查看：
Rabee UI 設定步驟
https://rabeeui.com/docs/setup