統計カード
ダッシュボードヘッダ用のKPIカード、2つのルックス - ダッシュボードテンプレートのコンパクト列、およびグラデーションアイコンタイル、オプション情報ツールチップ、ディスプレイサイズ値、および比較キャプションとデルタピルを運ぶフッターバンド。
総収益
$152,313.92
先月から
16%注文合計
25,162
先月から
20%新規のお客様
3,847
先月から
8.1%払い戻し
$4,209.44
先月から
2.4%インストール
CLI または手動でスタットカードを追加できます。CLI は、チップとツールチップのプリミティブをプルします。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add stat-cards共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
バリエーション
2つのルックは、 variant プロップ。 plain (デフォルト)は、ダッシュボードテンプレートからコンパクトカードです。ニュートラルアイコンタイル、ラベル、値、およびデルタチップ。 フッター ラベルの横にある小さなグラデーションアイコンタイルでリードし、表示サイズで値を設定し、グリフが従う白いデルタピルでフッターバンドに比較を移動します deltaColor.
<StatCards /> {/* compact: icon, label, value, delta chip */}<StatCards variant="footer" /> {/* icon tile + label, display value, footer band */}あなた自身のデータをもたらす
パス stats デモメトリックを交換します。フッターのバリアントは、スタットごとに3つの追加のオプションフィールドを読みます。 tone アイコンタイル(青、オレンジ、紫、ピンク、空、またはエメラルド)を着色し、 caption フッターのテキストを交換し、 hint ツールチップで info glyph を追加します。
import { RiCoinsFill, RiShoppingBasket2Fill } from "@remixicon/react";import { StatCards, type Stat } from "@/components/application/dashboard/stat-cards";
const stats: Stat[] = [ { icon: RiCoinsFill, label: "Total revenue", value: "$152,313.92", delta: "16%", deltaColor: "lime", // lime | rose | neutral - picks the pill glyph too tone: "blue", // icon tile tint (footer variant) caption: "From last month", // footer band caption (footer variant) hint: "Gross revenue across all channels.", // info tooltip (footer variant) }, { icon: RiShoppingBasket2Fill, label: "Total orders", value: "25,162", delta: "20%", deltaColor: "lime", tone: "orange", },];
<StatCards variant="footer" stats={stats} />