Svelte × Tailwind CSSのコンポーネント集「Rabee UI」公式ドキュメントサイトを公開。開発者目線でより使いやすい体験を提供
株式会社Rabee
カスタマイズを前提とした「UIコンポーネントの種」をオリジナルのドキュメントサイトで提供。プロジェクトへの導入がよりスムーズになりました。
株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSベースのUIコンポーネント集「Rabee UI（読み：ラビーユーアイ）」において、これまでStorybook上で提供していたドキュメントを一新し、オリジナルの公式ドキュメントサイトを公開したことをお知らせします。
また、今回のアップデートにあわせて、新たに6つのUIコンポーネントも追加しました。
[画像1:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-e5139e9350d532c7ed4276654b7991f1-2400x1260.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
Rabee UI 公式ドキュメントサイト
https://rabeeui.com/docs
Rabee UI Figma Community
https://www.figma.com/community/file/1479376628733075423
■ Rabee UIとは
Rabee UIとは、SvelteとTailwind CSSで構築されたUIコンポーネント集であり、カスタマイズを前提とした「コンポーネントの種」です。プロダクトごとに色やフォント、アニメーションなどを自由にカスタマイズすることで、プロダクトらしさを表現するデザインシステムをスピーディーに作り上げます。
・Svelte × Tailwind CSSで柔軟にカスタマイズできる
・コンポーネント単位でコピー＆ペーストして導入できる
・ダークモード・ライトモードに対応
・日本語利用を前提としたデザイン
・コードと一致したFigmaデータも公開中
■ Rabee UI公式ドキュメントサイトの特徴
これまでRabee UIコンポーネントのコードはStorybookをベースに提供してきましたが、今回新たに、Rabee UIを取り入れて構築したオリジナルのドキュメントサイトに移行しました。プロダクト開発に関わる人にとって、より快適な体験を提供します。
Rabee UI 公式ドキュメントサイト
https://rabeeui.com/docs
[画像2:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-23e2b25602ea298dae37e7b0312bcc6f-3600x2200.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
[画像3:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-58bd5418bea89a9d350a785578edb25a-3600x2200.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
1. 導入方法・コンポーネント一覧をわかりやすく刷新
Rabee UIのセットアップ方法やコンポーネント一覧がわかりやすい構成になりました。Rabee UIのスムーズな導入をサポートします。
2. 開発者目線で使いやすいドキュメントにアップデート
各UIコンポーネントの説明ページにおいて、利用可能なプロパティや対応しているステータスを一覧で表示。開発者目線で、実際に使うときのイメージがしやすいドキュメント構成になりました。
3. 掲載コンテンツの自由度も向上
オリジナルのドキュメントサイトに移行したことで、今後のコンテンツ拡充の自由度も向上しました。よりわかりやすく、より使いやすいドキュメントへ改善を続けます。
■ 6つのコンポーネントも新たに公開
今回のアップデートにあわせて、以下の6つの新たなUIコンポーネントも追加しました。今後も継続的に、SaaSなどのページ構築に役立つUIを順次公開します。
-
Breadcrumb-
Message-
Select-
Separator-
Spinner-
Tooltip
[画像4:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-adc14dcfe7132b27f0436c38b2d51d3e-3200x1280.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
[画像5:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-ead418ed0859ce38f580fa0ad4b7abc7-2400x1260.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
■ 今後の展望
Rabee UIでは、今後もプロダクト開発を加速させるUIコンポーネントを継続的に追加していきます。基本的なUIコンポーネントだけでなく、より複雑なレイアウトや、実務で頻出するユースケースにも対応することで、単なるコンポーネント集を超えた開発基盤を目指します。
■ Rabee UIの最新情報
Rabee UIに関する最新情報は以下で公開しています。
Rabee UI LP
https://rabeeui.com
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開発を実現するクリエイティブカンパニーです。
[画像6:
https://prcdn.freetls.fastly.net/release_image/97622/10/97622-10-eda1a43e031f21ca29469c025210bb9c-1200x630.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
プレスリリース提供：PR TIMES
記事提供：PRTimes
