コンポーネント一覧へ戻る
P95 レイテンシーカード React コンポーネント

これは何か

ラベル・184 ms のような数字・小さな増減と、p50〜p95 の帯に p95 の線を重ねた小さなグラフの白いカードです。画面に入ると帯がふわっと現れ、p95 の線が左から描かれます。遅くなったときは pill がローズ色、速くなったときは緑です。ラベル・値・増減・2つの系列を差し替えて、API ダッシュボードやパフォーマンスの機能紹介にそのまま置けます。

コンポーネント

P95 レイテンシーカード

ラベル・184 ms のような数字・小さな増減と、p50〜p95 の帯に p95 の線を重ねた小さなグラフの白いカードです。画面に入ると帯がふわっと現れ、p95 の線が左から描かれます。遅くなったときは pill がローズ色、速くなったときは緑です。ラベル・値・増減・2つの系列を差し替えて、API ダッシュボードやパフォーマンスの機能紹介にそのまま置けます。

確認しています…
ライブプレビュー

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 · Lucide の完成 UI

依存パッケージ

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

技術スタック

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

バージョン 1.0.0