DesignLayer
バー KPI カード
コンポーネント一覧へ戻る
これは何か
ラベル・大きな数字・増減の pill・12本の縦棒を並べた白い KPI カードです。画面に入ると棒が左から順に下から伸び、増減の pill がふわっと現れます。最後の棒は増減に合わせて緑か赤になります。ラベル・値・増減・データ点を差し替えて、ダッシュボードの一列や分析機能の紹介にそのまま置けます。
コンポーネント
バー KPI カード
ラベル・大きな数字・増減の pill・12本の縦棒を並べた白い KPI カードです。画面に入ると棒が左から順に下から伸び、増減の pill がふわっと現れます。最後の棒は増減に合わせて緑か赤になります。ラベル・値・増減・データ点を差し替えて、ダッシュボードの一列や分析機能の紹介にそのまま置けます。
確認しています…
ライブプレビュー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