Svelte × Tailwind CSSの「Rabee UI」に新たにサンプルが登場。ヘッダー・サイドバーが使えるようになりました

株式会社Rabee

Svelte × Tailwind CSSの「Rabee UI」に新たにサンプ

カスタマイズを前提とした「UIコンポーネントの種」を提供中。コンポーネントを組み合わせた使用例であるサンプルを新たに公開し、より実務で使いやすく進化しました。

[画像1: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-fdb2839b4b32c9165c383b778db581aa-2400x1260.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」において、ヘッダー・サイドバーの2種類のサンプルを含むUIコンポーネント4つを新たに公開しました。
今回リリースした4種類も含む全38種類のRabee UIコンポーネントは、公式ドキュメントサイトで確認できます。
Rabee UI 公式ドキュメント

■ Rabee UIとは
Rabee UIとは、SvelteとTailwind CSSで構築されたUIコンポーネント集であり、カスタマイズを前提とした「コンポーネントの種」です。プロダクトごとに色やフォント、アニメーションなどを自由にカスタマイズすれば、ブランドらしさを表現するデザインシステムを小さいコストで構築できます。
Rabee UIの特徴
・Svelte × Tailwind CSSで柔軟にカスタマイズできる
・コンポーネント単位でコピー＆ペーストして導入できる
・ダークモード・ライトモードに対応
・日本語利用を前提としたデザイン
・コードと一致したFigmaデータも公開中

[画像2: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-0a6fdf9481f78ba9d69205f0c63cadb4-3600x2080.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
Figmaデータで提供中のドキュメント

[画像3: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-013e08b066321f247109bd14be683504-3600x2080.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
公式サイトではコードをダウンロード可能

■ コンポーネントを組み合わせた使用例「サンプル」が登場
今回初めて、複数コンポーネントを組み合わせた使用例としての「サンプル」を追加しました。すでに公開済みのInput、Button、GlobalNavigationといったRabee UIを利用し、HeaderとSidebarの2種のサンプルを用意しています。
サンプルの一部はレスポンシブにも対応。1つのコンポーネントでPC・モバイル双方のレイアウトをすばやく構築できます。
- Header- Sidebar
[画像4: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-f4f536577a5036d1fb72a581ae31242a-3900x1736.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
サンプル / Header（レスポンシブ対応）

[画像5: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-9499730f8472eabee27fd64664e0fc11-3600x2080.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
サンプル / Sidebar

■ コンポーネント2種類も新たに追加
あわせて、以下2つの新たなUIコンポーネントも追加しました。今後もWebサービスのページ構築に役立つパーツを拡充していきます。
- Stepper- Popover
[画像6: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-be3747df7ae869b683de84093dc926b0-3600x2080.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

■ 今後の展望
Rabee UIでは、今後もプロダクト開発を加速させるUIコンポーネントを継続的に追加します。より複雑なレイアウトや実務で頻出するユースケースに対応し、単なるコンポーネント集を超えて、あらゆるプロダクト開発の基盤を目指します。

■ Rabee UIの最新情報
Rabee UIに関する最新情報は以下で公開しています。

Rabee UI 公式ドキュメントサイト
https://rabeeui.com/docs

Rabee UI Figma
https://www.figma.com/community/file/1479376628733075423

Rabee UI Discordコミュニティ
https://discord.com/invite/VjtgZ4dkQa

運営について会社名：株式会社Rabee
代表者名：上松勇喜
所在地：東京都渋谷区渋谷３丁目２６−２０　関電不動産渋谷ビル１０F
設立：2018年8月
事業内容：受託開発・自社サービス開発・運用
https://rabee.jp/

株式会社Rabeeは、受託開発と自社サービス開発のノウハウを活かし、効率的なWeb開発を実現するクリエイティブカンパニーです。

[画像7: https://prcdn.freetls.fastly.net/release_image/97622/15/97622-15-ffc8e3c580a31311bd34ff9caca2a2e7-2400x1260.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]

プレスリリース提供：PR TIMES

Svelte × Tailwind CSSの「Rabee UI」に新たにサンプ