Rabee UI for Svelte × Tailwind CSS Adds 4 New Samples, Color Definitions Clearly Refreshed
Rabee Inc. has updated "Rabee UI," its UI component collection for Svelte × Tailwind CSS, adding four new samples and revamping existing components like "Badge" to "Chip" and "Dialog" to "Modal," along with clearer color definitions.
📋 Article Processing Timeline
- 📰 Published: April 28, 2026 at 20:44
- 🔍 Collected: April 28, 2026 at 12:01
- 🤖 AI Analyzed: April 28, 2026 at 12:22 (21 min after Collected)
Rabee Inc. (Headquarters: Shibuya-ku, Tokyo; Representative Director: Yuki Uematsu) has updated "Rabee UI," its UI component collection for Svelte × Tailwind CSS, by adding new samples and refreshing color definitions.
All 49 types of Rabee UI components, including this update, can be viewed at:
Rabee UI Official Documentation
■ What is Rabee UI?
Rabee UI is a collection of UI components built with Svelte and Tailwind CSS, designed as "component seeds" to be customized. By freely customizing colors, fonts, and animations for each product, development teams can build brand-specific design systems at low cost.
■ Features of Rabee UI
・Flexible customization with Svelte × Tailwind CSS
・Components can be integrated by copy & paste
・Supports dark mode and light mode
・Designed for Japanese language usage
・Figma data consistent with the code is also available
■ 4 New Samples Added to Assist in Building Admin Panels and SaaS
Since the release of its documentation page in May 2025, Rabee UI has continued monthly updates. This month, four new samples were added: "Admin Layout," "Authentication," "Error Layout," and "Header Snippet." All of these samples support the construction of frequently used pages in product development.
Admin Layout is an example of a common admin panel layout, including a sidebar and header. Authentication provides screens necessary for signing in and signing up. Error Layout provides examples of error screens like 404 (page not found) and 500 (server error). Header Snippet is an example of a user-friendly header for web services.
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
Sample / Admin Layout, Header Snippet
Sample / Authentication, Error Layout
■ Existing Components "Badge" and "Dialog" Revamped to "Chip" and "Modal"
Two existing components have been updated to be more practical for real-world use.
"Badge" updated to "Chip"
The component previously offered as "Badge" has been renamed "Chip," and its color and visual variations have been expanded. Designs can now be flexibly chosen to suit purposes such as status display or tag display.
Chip https://rabeeui.com/docs/components/chip
Component / Chip
"Dialog" updated to "Modal"
The component previously offered as "Dialog" has been renamed "Modal," and its design has been re-evaluated. The previous Dialog provided both modal and dialog display functions in one component. The new Modal focuses solely on the function of "displaying as a modal," allowing the content displayed within the modal to be freely changed. This makes it usable for various modal purposes.
Modal https://rabeeui.com/docs/components/modal
Component / Modal
■ Color Definitions Completely Refreshed
The naming of color variables provided by Rabee UI has been completely revamped. They have been organized to clarify their purpose and hierarchy, making it easier to find desired variables in the code. Additionally, new border colors for input-related components and focus ring colors for keyboard operations have been added. The details of the new CSS can be checked in the following documentation:
Rabee UI Setup Guide
https://rabeeui.com/docs/setup
All 49 types of Rabee UI components, including this update, can be viewed at:
Rabee UI Official Documentation
■ What is Rabee UI?
Rabee UI is a collection of UI components built with Svelte and Tailwind CSS, designed as "component seeds" to be customized. By freely customizing colors, fonts, and animations for each product, development teams can build brand-specific design systems at low cost.
■ Features of Rabee UI
・Flexible customization with Svelte × Tailwind CSS
・Components can be integrated by copy & paste
・Supports dark mode and light mode
・Designed for Japanese language usage
・Figma data consistent with the code is also available
■ 4 New Samples Added to Assist in Building Admin Panels and SaaS
Since the release of its documentation page in May 2025, Rabee UI has continued monthly updates. This month, four new samples were added: "Admin Layout," "Authentication," "Error Layout," and "Header Snippet." All of these samples support the construction of frequently used pages in product development.
Admin Layout is an example of a common admin panel layout, including a sidebar and header. Authentication provides screens necessary for signing in and signing up. Error Layout provides examples of error screens like 404 (page not found) and 500 (server error). Header Snippet is an example of a user-friendly header for web services.
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
Sample / Admin Layout, Header Snippet
Sample / Authentication, Error Layout
■ Existing Components "Badge" and "Dialog" Revamped to "Chip" and "Modal"
Two existing components have been updated to be more practical for real-world use.
"Badge" updated to "Chip"
The component previously offered as "Badge" has been renamed "Chip," and its color and visual variations have been expanded. Designs can now be flexibly chosen to suit purposes such as status display or tag display.
Chip https://rabeeui.com/docs/components/chip
Component / Chip
"Dialog" updated to "Modal"
The component previously offered as "Dialog" has been renamed "Modal," and its design has been re-evaluated. The previous Dialog provided both modal and dialog display functions in one component. The new Modal focuses solely on the function of "displaying as a modal," allowing the content displayed within the modal to be freely changed. This makes it usable for various modal purposes.
Modal https://rabeeui.com/docs/components/modal
Component / Modal
■ Color Definitions Completely Refreshed
The naming of color variables provided by Rabee UI has been completely revamped. They have been organized to clarify their purpose and hierarchy, making it easier to find desired variables in the code. Additionally, new border colors for input-related components and focus ring colors for keyboard operations have been added. The details of the new CSS can be checked in the following documentation:
Rabee UI Setup Guide
https://rabeeui.com/docs/setup