コンポーネント

Draft

Rimo のコンポーネントはデザインシステム rimo-design-system で一元管理し、各プロダクトはそれを利用する。個別プロダクトで同種のコンポーネントを作り直さない。

現在 53 個。各コンポーネントの状態・バリアント・使用例は Storybook を参照（公開準備中。公開後にここへ URL を記載する）。

アクション

コンポーネント説明
button基本のボタン。primary / secondary / destructive などのバリアントを持つ
toggleオン / オフを切り替えるボタン
toggle-group複数のトグルをまとめて、単一選択または複数選択にする

フォーム入力

コンポーネント説明
input1 行のテキスト入力欄
textarea複数行のテキスト入力欄
checkboxチェックボックス
radio-groupラジオボタンのグループ
selectドロップダウン式の選択
combobox検索付きセレクト。単体の部品ではなく popover + command の組み合わせパターン
switchオン / オフのスイッチ
slider数値をつまみで選ぶスライダー
formバリデーションとラベル・エラー表示の枠組み
label入力欄に付けるラベル
input-otpワンタイムコードの分割入力欄
calendarカレンダー表示。日付選択の土台
date-picker入力欄とカレンダーを組み合わせた日付選択

オーバーレイ

コンポーネント説明
dialogモーダルダイアログ
alert-dialog確認を求めるダイアログ（キャンセル / 実行）
responsive-dialog画面幅で dialog と drawer を自動で切り替える（Rimo 独自）
drawer画面下から出るドロワー（主にモバイル）
sheet画面端から出るパネル
popoverクリックで出る小さなパネル
hover-cardホバーで出る補足カード
tooltipホバーで出す短い説明
dropdown-menuドロップダウンメニュー
commandコマンドパレット（検索して実行）

ナビゲーション

コンポーネント説明
breadcrumb現在地を示すパンくずリスト
paginationページ送り
sidebarアプリのサイドバーの枠組み
tabsタブ切り替え

フィードバック

コンポーネント説明
alertページ内に置く通知帯（成功・警告・エラー）
toast画面隅に一時的に出る通知
progress進捗バー
skeleton読み込み中のプレースホルダー
spinner読み込み中の回転インジケーター

表示・レイアウト

コンポーネント説明
cardカード
table表
accordion開閉式のセクション
collapsible単体の開閉領域
avatarユーザーアイコン
badge小さなラベル（状態・件数）
separator区切り線
scroll-areaスクロールバーの見た目を統一したスクロール領域
resizableドラッグで幅・高さを変えられる分割パネル
aspect-ratio縦横比を固定する箱
carousel横スクロールのカルーセル
chartグラフ

メッセージ・会話（Rimo 独自）

文字起こし・チャットの画面のために Rimo が独自に持つコンポーネント。

コンポーネント説明
messageアバター・ヘッダー・フッター付きのメッセージ行
message-scrollerメッセージ一覧のスクロール制御（新着への自動追従）
bubbleチャットの吹き出し。リアクション表示を持つ
marker話者などを示す小さな目印（アイコン＋ラベル）
attachment添付ファイルの表示
custom-iconsRimo 独自の SVG アイコン集（AI・ロボット・目次アイコンなど）
Copied!