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