コンポーネント一覧へ戻る

稼働率デイストリップ React コンポーネント

これは何か

ラベル・大きな稼働率・90日ぶんの細い棒を並べた、白い信頼性カードです。画面に入ると棒が左から順に立ち上がります。正常な日は緑、低下した日は黄、障害の日はローズ色です。ラベル・数字・日ごとの状態を差し替えて、ステータスページや SLA の要約、信頼性の機能紹介にそのまま置けます。

ほかのコンポーネント

一覧を見る →

ゴール進捗リング

期間比較カード

カウントアップトレンドスタット

エリアツールチップカード

値ヒストグラムカード

ランクバーリスト

コンポーネント

稼働率デイストリップ

ラベル・大きな稼働率・90日ぶんの細い棒を並べた、白い信頼性カードです。画面に入ると棒が左から順に立ち上がります。正常な日は緑、低下した日は黄、障害の日はローズ色です。ラベル・数字・日ごとの状態を差し替えて、ステータスページや SLA の要約、信頼性の機能紹介にそのまま置けます。

確認しています…

ライブプレビュー

Verified Technical Spec

アニメーション: CSS / Tailwind
Reduced motion: 確認済み
キーボードフォーカス: ソース上では未検出
対応環境: Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix 対応

含まれるもの

ソースを Cursor / Claude に渡してエージェントに組み込める
React · TypeScript · Tailwind CSS の完成 UI

依存パッケージ

React 19.0.0
Typescript 5.7.2
Tailwindcss 3.4.16

技術スタック

React
TypeScript
Tailwind CSS

バージョン 1.0.0