コンポーネント

コンテンツを最大幅で囲み、水平方向に中央揃えするレイアウトコンポーネント。 設定可能なサイズとパディングで一貫したページ幅の制約を提供します。

CSSカラムを使用してコンテンツを複数のカラムに流し込むレイアウトコンポーネント。 コンテンツが自然に次のカラムへ流れるため、テキストブロック、リスト、メイソンリー風レイアウトに最適です。

CSS Gridを使用した明示的なカラムレイアウトのレイアウトコンポーネント。 各子要素がグリッドセルを占め、カードレイアウト、ダッシュボード、構造化されたコンテンツに最適です。

調整可能なパネルレイアウトを作成するためのドラッグ可能な仕切り付きリサイズ可能レイアウトコンポーネント。 水平・垂直方向、サイズ制約、オプションのlocalStorage永続化に対応しています。

関連するコンテンツをグループ化するための柔軟なコンテナコンポーネント。 フラット、ホバー、エレベーテッドスタイルなど複数のバリアントに対応し、オプションでヘッダーとフッターを付けられます。

コンテンツセクションを区切るための視覚的なセパレーター。水平・垂直方向、 実線/破線/点線のバリアント、設定可能な間隔、オプションの中央テキストラベルに対応しています。

設定可能なギャップ、配置、アイテム間のオプションの区切り線を備えた、 要素を縦または横に積み重ねる柔軟なレイアウトコンポーネント。

CSSカラムベースのメイソンリーレイアウトでレスポンシブなカラム数調整に対応。 コンテンツが自然にカラムに流れ込み、Pinterest風のレイアウトを実現します。

セクション、ネストされた項目、アイコン、バッジ、レスポンシブ対応を備えた折りたたみ可能なアプリケーションサイドバー。 フルスタイルは表示されたままアイコンのみのレールに折りたたまれます。 フロー...

モバイルハンバーガーメニュー、ダークモード対応、 オプションのスティッキースクロール動作を備えたレスポンシブなナビゲーションバー。

コンテンツをパネルに整理するためのアクセシブルなタブインターフェース。 完全なキーボードナビゲーション付きで複数の視覚スタイルを利用できます。

フィルタリングやカテゴリ選択のための丸いピル/チップボタン。 アクティブ/非アクティブ状態、リンクまたはボタンの動作に対応しています。

ホバーまたはクリックで複数カラムのリンクグループを表示する大型ドロップダウンナビゲーションメニュー。 設定可能な遅延付きホバーインテント、キーボードアクセシビリティ、 モバイルフレンドリーなクリ...

StimulusとTailwind CSSで構築された完全にアクセシブルなドロップダウンメニューコンポーネント。 カスタムトリガー、メニューヘッダー、区切り線、アイコン、破壊的アクションに対応し...

ページ階層を示すナビゲーションパス。セパレーターのカスタマイズ、 オーバーフロー時の中間項目の折りたたみ、リンク/テキスト項目に対応しています。 折りたたみ機能により、中間のパンくずが「...」...

データセット用のページナビゲーションコンポーネント。省略記号付きの番号ページ、 シンプルな前へ/次へナビゲーション、カーソルベースのさらに読み込みパターンに対応しています。 シームレスなページ遷...

素早いナビゲーションのためのキーボード操作優先のコマンドパレット。 あいまい検索、キーボードナビゲーション、CMD+Kショートカットに対応しています。

ウィザード、チェックアウトフロー、オンボーディングのためのマルチステッププログレスインジケーター。 完了したステップ間のクリックナビゲーション、リニアモード（前後のみ）、 フリーモード（任意のス...

展開/折りたたみ可能なノード、アイコン、チェックボックス選択、キーボードナビゲーションを備えた 階層データ表示。ファイルブラウザー、カテゴリツリー、組織図に最適です。 三状態の親チェックボックス...

設定可能なしきい値を超えてスクロールすると表示されるフローティングボタン。 ページの先頭までスムーズにスクロールして戻ることができます。表示位置、 スクロールしきい値、スムーズ/即時スクロール動...

オプションのファイル名ヘッダーとクリップボードへのコピー機能を備えた シンタックスハイライト付きコード表示。

主要な指標や統計をコンパクトなカード形式で表示。 ラベル、値、オプションのトレンドインジケーターを含みます。

さまざまなユースケースに対応する複数のバリアントを持つクリップボードコピーコンポーネント。 ボタン、インライン入力、コードブロックのスタイルに対応し、アニメーション付きの成功フィードバックを備え...

キーと値のペアを表示するためのセマンティックなディスクリプションリスト。 スタック、水平、ストライプの3つのスタイルを用意しています。 アクセシビリティのために適切なdl/dt/dd HTML要...

情報を整理するための展開・折りたたみ式コンテンツセクション。 基本（単一展開）、常時展開（複数同時展開）、ネスト型の3つのバリエーションを用意しています。

画像、イニシャルのフォールバック、オプションのステータスインジケーターを備えたユーザーまたはエンティティの表現。 アバターグループモードでは、設定可能なオーバーラップと「+N人」のオーバーフロー...

組み合わせ可能な機能を備えた柔軟なデータテーブルコンポーネント。ページネーション、 ソート、フィルタリング、検索、一括操作付き行選択、CSVエクスポート、 カラム表示切り替えに対応しています。す...

矢印ナビゲーション、ページネーションドット、タッチ/スワイプ操作、 設定可能なオートプレイを備えたレスポンシブなカルーセル/スライダーコンポーネント。 無限ループとスムーズなCSS遷移に対応して...

ネイティブHTML Drag and Drop APIとStimulusを使用したドラッグ＆ドロップ並べ替えリストとカンバンボード。 外部依存関係不要。ドラッグハンドル、視覚的なドロップインジケ...

プロジェクト管理やタスク追跡のためのドラッグ＆ドロップ対応カンバンボード。 カラーコードされたヘッダーを持つ複数カラム、ラベル・担当者・期日付きのドラッグ可能なカードに対応。 カラム間のドラッグ...

アイコン、タイムスタンプ、コンテンツスロットを備えた時系列イベント表示。垂直スタイルでは アクティビティフィードやチェンジログ用にコネクターラインでイベントを積み重ねます。水平スタイルでは プロ...

日付の表示と選択のためのインタラクティブなカレンダーコンポーネント。 月のナビゲーション、イベントドット、日付範囲制約、 キーボードナビゲーション、週の開始曜日の設定に対応しています。

コンテナの下部付近にスクロールすると自動的にコンテンツを追加読み込み。 シームレスなRails連携のためにTurbo Framesと自然に連動します。IntersectionObserverによ...

目標日時までカウントダウンするアニメーション付きタイマー。シンプルスタイルでは プレーンな数字とラベルを表示。フリップスタイルでは分割カードとCSSキーフレーム アニメーションによる3Dフリップ...

送信者の配置、アバター、タイムスタンプを備えた会話メッセージの表示。 ラウンドスタイルはiMessage風のカラーバブルと角丸を再現。フラットスタイルは Slack風のインライン名、タイムスタン...

月額/年額切り替え付きの料金プラン表示。横並びのカード形式、 またはおすすめプランをハイライトした機能比較表形式で利用できます。

サーキュラー、ドット、バーの各バリアントを持つローディングインジケーターコンポーネント。 純粋なCSSアニメーション — JavaScriptは不要です。

複数のカラーバリアントを持つ小さなステータスインジケーターコンポーネント。 ステータス、ラベル、カウント、タグの表示に最適です。

ユーザーに重要なメッセージを表示するための通知コンポーネント。 成功、エラー、警告、情報の各バリアントに対応し、オプションでアイコンや閉じる機能を備えています。

3つの形状バリアントを持つローディングプレースホルダーコンポーネント。 パルスアニメーションでローディング状態を示します。複数のスケルトンを組み合わせて カード、リスト、コンテンツのローディング...

完了状態を示すための水平プログレスインジケーター。 確定モード（パーセンテージ）と不確定モード（アニメーション）に対応し、 複数のカラーバリアントとサイズオプションを備えています。

ユーザーフィードバックのためのスタック可能な通知トーストとフラッシュメッセージバナー。 成功、エラー、警告、情報のバリアントに対応し、設定可能な 表示位置、自動消去時間、複数の視覚スタイルを備え...

コンテンツが空または見つからない場合にフレンドリーなメッセージを表示。 アイコン、タイトル、説明、オプションのアクションボタンを含みます。

重要なメッセージ、プロモーション、警告のための常設アナウンスバー。 localStorageを使った閉じる機能の永続化、アクションボタン、複数のバリアントに対応しています。 ビューポートの上部ま...

ホバーまたはクリックで追加情報を表示するコンテキストツールチップ。 複数の配置位置、ライト/ダークテーマ、オプションの矢印に対応しています。

背景オーバーレイ、フォーカストラップ、スムーズなアニメーションを備えたアクセシブルなモーダルダイアログ。 デフォルト、アラート、確認、プロンプトの各バリアントを用意しています。 Stimulus...

セカンダリコンテンツ、フォーム、詳細ビューのために画面端からスライドインするパネル。 背景オーバーレイ、フォーカストラップ、Escapeキーで閉じる機能を備えています。 ナロー（320px）とワ...

バッジカウント、既読/未読状態、既読マーク機能を備えたベルアイコン通知パネル。 外部クリックで閉じる、Escapeキー対応、イベントディスパッチを含みます。

キーボードナビゲーションとタッチ操作に対応したフルスクリーン画像オーバーレイ。 単一画像ビューアー、または前へ/次へナビゲーション、カウンター表示、 サムネイルグリッド付きのギャラリーとして利用...

クリックまたはホバーでトリガーされるリッチコンテンツオーバーレイ。ツールチップ（ホバー、テキストのみ）とは異なり、 ポップオーバーはフォーム、メニュー、インタラクティブなコンテンツを保持でき、設...

項目、サブメニュー、区切り線、キーボードショートカット表示を備えた右クリックコンテキストメニュー。 右クリック（contextmenuイベント）でトリガーされるネイティブ感覚のコンテキストメニュ...

複数のバリアント（primary、secondary、ghost）とサイズ（sm、md、lg）を備えた汎用ボタンコンポーネント。 アイコン、ローディング状態に対応し、リンクやフォームボタンとして...

ラベル、ヒントテキスト、エラー状態を備えた汎用テキスト入力コンポーネント。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 サイズ、必須/無...

オプションの自動リサイズ機能を備えた複数行テキスト入力コンポーネント。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 ラベル、ヒントテキス...

ラベル、ヒントテキスト、エラー状態を備えたネイティブセレクトドロップダウンコンポーネント。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 ...

ラベルとオプションの説明テキストを備えた単一チェックボックス入力。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 エラー状態や無効化スタイ...

複数の選択肢から単一のオプションを選択するためのラジオボタン入力グループ。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 各オプションに説...

リストから複数のオプションを選択するためのチェックボックス入力グループ。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 各オプションに説明...

ビュー、フィルター、モードの切り替えのためのトグルボタンの行。 単一選択（ラジオ風）と複数選択（チェックボックス風）モードに対応し、 矢印キーによる完全なキーボードナビゲーションを備えています。

ブーリアンのオン/オフ状態を切り替えるトグルスイッチコントロール。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 ラベル、説明、複数サイズ...

アイコン、テキスト、ボタンのオプションの前置・後置アドオンを備えたテキスト入力。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 アドオンは...

プレビュー機能付きのドラッグ＆ドロップファイルアップロードコンポーネント。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 画像にはファイル...

キーボードナビゲーション付きの検索可能なセレクトドロップダウンコンポーネント。 フォームビルダーモード（Railsフォームオブジェクト利用）とスタンドアロンの両方に対応しています。 入力によるオ...

増減ボタン、最小/最大制約、ステップサイズを備えた数値入力。 ネイティブのnumber入力より優れたUXを提供し、ブラウザ間で一貫したスタイリングを実現します。 プレフィックス/サフィックステキ...

ドラッグ可能なハンドルによる数値選択。単一値と範囲（2つのハンドル）モード、 ステップマーク、ライブ値表示に対応しています。スタンドアロンまたは Railsフォーム内でhidden入力を使用して...

認証コードやOTP入力のための単一文字入力の連続。 入力時にフォーカスが自動的に次へ移動し、貼り付けで全フィールドを一括入力でき、 バックスペースで入力間を移動できます。フォーム送信のためにすべ...

値が入力されると削除可能なタグ/チップを作成するテキスト入力。 バリデーション、最大タグ数制限、オートコンプリート候補に対応しています。 Enterキー、カンマ区切り、またはカスタム区切り文字で...

星（またはカスタムアイコン）によるレーティング入力。半星精度、読み取り専用表示モード、 カスタムアイコン形状に対応しています。ホバープレビューとキーボードナビゲーションを備えています。 スタンド...

表示切り替え、強度メーター、要件チェックリストを備えたパスワード入力。 目のアイコンでパスワードの表示/非表示を切り替え、オプションの色分け強度バー、 リアルタイムで更新される要件チェックリスト...

複数の値を選択できる検索可能なドロップダウン。選択された値は入力欄に削除可能な タグ/チップとして表示されます。オプションのグルーピング、最大選択数、検索フィルタリング、 全選択/全解除アクショ...

テキストフォーマット用ツールバー付きのcontenteditableリッチテキストエディター。 ベーシックとフルの2つのスタイルで異なるフォーマットツールセットを提供。 フォーム送信用にコンテン...

インラインメンション機能付きのテキストエリア。トリガー文字（デフォルトは「@」）を入力すると、 フィルタリング可能なユーザーまたはアイテムのドロップダウンが表示されます。キーボードナビゲーション...

国セレクタードロップダウン、国旗絵文字、国番号を備えた国際電話番号入力。 検索可能な国リスト、自動フォーマット、フォーム送信用にE.164形式の値を 格納するhidden入力を備えています。

マウスとタッチ操作に対応したキャンバスベースの署名キャプチャ。 署名をbase64 PNGとしてフォームのhidden入力にエクスポートします。 クリアボタンとRetinaディスプレイ対応を備え...

通貨記号アドオン、自動桁区切り、小数フォーマットを備えた通貨入力フィールド。 左右の記号配置、国際フォーマット用のカスタマイズ可能な区切り文字、 最小/最大制約に対応し、フォーム送信用に生の数値...

テキスト、テキストエリア、セレクトの各スタイルに対応したクリックで編集可能なインライン編集コンポーネント。 ブラー時の自動保存、オプションのサーバーへのPATCHリクエスト、キーボードショートカ...

色相/彩度パッド、スライダー、プリセットスウォッチ、hex/rgb入力を備えたカラー選択入力。 アルファチャンネルとコンパクトなポップオーバーモードに対応。ドラッグ可能な彩度/明度キャンバス、 ...

カレンダードロップダウン付きの日付選択コンポーネント。単一日付と日付範囲の 選択モードに対応しています。最小/最大日付の制約、設定可能な表示形式、 週の開始曜日オプションを含みます。Railsフ...