元件
pinion-ui

Theme

Tune

Lang

Stat

KPI / 指標單獨顯示。除 label / value / desc 外，valueColor / trend / trendValue 控制著色與方向箭頭。多項並排時用 wrapped=false 並以 <x-stat-group> 包裹。

最簡

Visits
1,234
<x-stat label="Visits" value="1,234" />

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Visits
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                1,234
            </div>
</div>
</div>
</div>

+ desc

Visits
1,234
since last month 
<x-stat label="Visits" value="1,234" desc="since last month" />

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Visits
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                1,234
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                since last month
            </div>
</div>
</div>
</div>

value 配色

null (default)
42.0K
valueColor=null
primary
42.0K
valueColor=primary
secondary
42.0K
valueColor=secondary
accent
42.0K
valueColor=accent
info
42.0K
valueColor=info
success
42.0K
valueColor=success
warning
42.0K
valueColor=warning
error
42.0K
valueColor=error 
<x-stat label="null (default)" value="42.0K" desc="valueColor=null" />
<x-stat label="primary" value="42.0K" desc="valueColor=primary" valueColor="primary" />
<x-stat label="secondary" value="42.0K" desc="valueColor=secondary" valueColor="secondary" />
<x-stat label="accent" value="42.0K" desc="valueColor=accent" valueColor="accent" />
<x-stat label="info" value="42.0K" desc="valueColor=info" valueColor="info" />
<x-stat label="success" value="42.0K" desc="valueColor=success" valueColor="success" />
<x-stat label="warning" value="42.0K" desc="valueColor=warning" valueColor="warning" />
<x-stat label="error" value="42.0K" desc="valueColor=error" valueColor="error" />

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                null (default)
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=null
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                primary
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-primary">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=primary
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                secondary
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-secondary">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=secondary
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                accent
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-accent">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=accent
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                info
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-info">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=info
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                success
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-success">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=success
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                warning
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-warning">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=warning
            </div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                error
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-error">
                42.0K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                valueColor=error
            </div>
</div>
</div>
</div>

trend（up=success ↑ / down=error ↓ / flat=灰色 →）

Signups
2,847
↑ vs last week +12%
Refunds
38
↓ vs last week -3%
Sessions
9,120
→ vs last week 0% 
<x-stat label="Signups" value="2,847" desc="vs last week" trend="up" trendValue="+12%" />
<x-stat label="Refunds" value="38" desc="vs last week" trend="down" trendValue="-3%" />
<x-stat label="Sessions" value="9,120" desc="vs last week" trend="flat" trendValue="0%" />

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Signups
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                2,847
            </div>
<div class="text-xs whitespace-nowrap text-success">
<span class="mr-1">↑</span> vs last week <span class="font-medium">+12%</span>
</div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Refunds
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                38
            </div>
<div class="text-xs whitespace-nowrap text-error">
<span class="mr-1">↓</span> vs last week <span class="font-medium">-3%</span>
</div>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Sessions
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-base-content">
                9,120
            </div>
<div class="text-xs whitespace-nowrap text-base-content/50">
<span class="mr-1">→</span> vs last week <span class="font-medium">0%</span>
</div>
</div>
</div>
</div>

icon（figure 中的 slot）

Downloads
31K
this month
Likes
1.2K
cumulative
Verified
89%
↑ verification rate +2.1% 
<x-stat label="Downloads" value="31K" desc="this month" valueColor="primary">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
</x-stat>
<x-stat label="Likes" value="1.2K" desc="cumulative" valueColor="error">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z"/></svg>
</x-stat>
<x-stat label="Verified" value="89%" desc="verification rate" valueColor="success" trend="up" trendValue="+2.1%">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</x-stat>

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Downloads
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-primary">
                31K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                this month
            </div>
</div>
<div class="shrink-0 flex items-center justify-center text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path></svg>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Likes
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-error">
                1.2K
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                cumulative
            </div>
</div>
<div class="shrink-0 flex items-center justify-center text-error">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z"></path></svg>
</div>
</div>
</div>
<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 shadow-[var(--shadow-box)] overflow-hidden">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Verified
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-success">
                89%
            </div>
<div class="text-xs whitespace-nowrap text-success">
<span class="mr-1">↑</span> verification rate <span class="font-medium">+2.1%</span>
</div>
</div>
<div class="shrink-0 flex items-center justify-center text-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
</div>
</div>

多個並排 — 用 x-stat-group 包裹 + wrapped=false

Total Visits
89,400
cumulative
New Users
2,103
↑ new this month +18%
Revenue
1.2M
↑ MTD +4.7% 
<x-stat-group direction="responsive" class="w-full">
    <x-stat :wrapped="false" label="Total Visits" value="89,400" desc="cumulative" valueColor="primary">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
    </x-stat>
    <x-stat :wrapped="false" label="New Users" value="2,103" desc="new this month" valueColor="info" trend="up" trendValue="+18%">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
    </x-stat>
    <x-stat :wrapped="false" label="Revenue" value="1.2M" desc="MTD" valueColor="success" trend="up" trendValue="+4.7%">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-8 w-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    </x-stat>
</x-stat-group>

<div class="rounded-[var(--radius-box)] tune-border border-base-content/10 bg-base-100 overflow-hidden shadow-[var(--shadow-box)] flex flex-col lg:flex-row divide-y divide-base-content/10 lg:divide-y-0 lg:divide-x w-full">
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Total Visits
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-primary">
                89,400
            </div>
<div class="text-xs whitespace-nowrap text-base-content/60">
                cumulative
            </div>
</div>
<div class="shrink-0 flex items-center justify-center text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
</div>
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                New Users
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-info">
                2,103
            </div>
<div class="text-xs whitespace-nowrap text-success">
<span class="mr-1">↑</span> new this month <span class="font-medium">+18%</span>
</div>
</div>
<div class="shrink-0 flex items-center justify-center text-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
</div>
</div>
<div class="flex items-center justify-between gap-4 px-6 py-4">
<div class="flex flex-col gap-1 min-w-0">
<div class="text-xs text-base-content/60 whitespace-nowrap">
                Revenue
            </div>
<div class="text-3xl font-extrabold whitespace-nowrap text-success">
                1.2M
            </div>
<div class="text-xs whitespace-nowrap text-success">
<span class="mr-1">↑</span> MTD <span class="font-medium">+4.7%</span>
</div>
</div>
<div class="shrink-0 flex items-center justify-center text-success">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" class="inline-block h-8 w-8 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
</div>
</div>