Rabee UI (Svelte × Tailwind CSS) Adds 'Link' Component and 'Pricing' Sample, Launches Changelog Page

Rabee Co., Ltd. (Headquarters: Shibuya, Tokyo; CEO: Yuki Agematsu) has updated 'Rabee UI,' a UI component library built with Svelte and Tailwind CSS, by adding new components and samples, updating existing samples, and launching a changelog page.

What is Rabee UI? Rabee UI is a collection of UI components built with Svelte and Tailwind CSS, designed to serve as 'seeds' that developers can customize. It allows for the construction of brand-consistent design systems at low costs by freely customizing colors, fonts, and animations for each product.

Features of Rabee UI - Flexible customization with Svelte and Tailwind CSS - Introduction by copy-pasting component units - Support for both dark and light modes - Designed with Japanese usage in mind - Figma data consistent with the code is also available

New 'Link' Component Added This month, a new 'Link' component was released. It is used to display text links within content, featuring two variants: 'primary' and 'secondary,' as well as a 'disabled' state. For links opening in a new tab via target="_blank", it automatically displays an external link icon and adds rel="noopener noreferrer" for security and performance.

New 'Pricing' Sample Added A 'Pricing' sample has been added, displaying pricing plans side-by-side. It provides a card-style layout example supporting toggle functionality between monthly and yearly billing.

Existing 'Button' Loading Sample Updated The loading state sample for the existing 'Button' component has been refreshed to a 'prevention of multiple clicks' pattern. This update provides a practical implementation example to prevent double submission during form transmission.

Changelog Page Launched A 'Changelog' page has been added to the Rabee UI documentation site, summarizing changes for each release. Users can check newly added components, samples, changes, and fixes in chronological order.