MetricCard
MetricCardは、KPIや重要指標をダッシュボードで見やすく表示するコンポーネントです。 タイトル、数値、トレンドインジケーター、説明テキスト、アイコンを自由に組み合わせて使えます。
Playground
Revenue
$45,231
Increased+20.1%
vs last month
<MetricCard>
<MetricCardHeader>
<MetricCardTitle>Revenue</MetricCardTitle>
<MetricCardSymbol><DollarSign /></MetricCardSymbol>
</MetricCardHeader>
<MetricCardValue>$45,231</MetricCardValue>
<MetricCardTrend direction="up">+20.1%</MetricCardTrend>
<MetricCardDescription>vs last month</MetricCardDescription>
</MetricCard>Variants
Revenue
$3,500
Increased+8.1%
default
Revenue
$3,500
Increased+8.1%
elevated
Revenue
$3,500
Increased+8.1%
ghost
Sizes
smdefaultlg| Size | パディング | 数値フォント | アイコン | プレビュー |
|---|---|---|---|---|
sm | p-4 | text-xl | icon-sm | Users 1,234 |
default | p-4 sm:p-5 | text-2xl | icon-md | Users 1,234 |
lg | p-4 sm:p-6 | text-3xl | icon-lg | Users 1,234 |
レスポンシブ： default・lgサイズはモバイル（640px未満）で自動的にパディングが一段階小さくなります。 smサイズは固定値です。
Features
Grid Preview
ダッシュボードでの実際の表示イメージ。grid-cols-2 lg:grid-cols-4 レイアウトでの使用例です。
Revenue
$45,231
Increased+20.1%
vs last month
Users
2,350
Increased+12.5%
new signups
Orders
1,234
Decreased-3.2%
vs last week
Conversion
3.24%
No change0.0%
no change
Trend
トレンドインジケーターは方向に応じてアイコンとカラーが自動適用されます。色覚多様性に配慮し、アイコン＋テキストで意味を伝えます。
Up
$3,500
Increased+8.1%
Down
$3,500
Decreased-3.2%
Neutral
$3,500
No change0.0%
Radius
Radius
0
Radius
8
Radius
12
Radius
16
Radius
24
API
Component Structure
MetricCard— Pure React.Headerヘッダー領域（Title + Symbol横並び）.Titleメトリクスラベル.Symbolアイコン表示領域.Value数値表示（animated対応）.TrendProps増減トレンド（direction）.Description補足テキストProps
MetricCard
variant"default""default" | "elevated" | "ghost"カードのスタイルバリアント
size"default""sm" | "default" | "lg"カードのサイズ (パディング・フォントサイズに影響)
radius"default""none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"カードの角丸サイズ (デザイントークン準拠)
animatedfalsebooleanMetricCardValueの数値をカウントアップでアニメーション表示
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "elevated" | "ghost" | "default" | カードのスタイルバリアント |
size | "sm" | "default" | "lg" | "default" | カードのサイズ (パディング・フォントサイズに影響) |
radius | "none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full" | "default" | カードの角丸サイズ (デザイントークン準拠) |
animated | boolean | false | MetricCardValueの数値をカウントアップでアニメーション表示 |
MetricCardTrend
direction—"up" | "down" | "neutral"トレンドの方向 (必須)。アイコンと色が自動適用
| Name | Type | Default | Description |
|---|---|---|---|
direction | "up" | "down" | "neutral" | — | トレンドの方向 (必須)。アイコンと色が自動適用 |