StatCard

component

A key figure with its label and, optionally, how it changed over a period.

Install

php bin/console ux:install stat-card \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: templates/ → templates/
Composer: symfony/ux-icons
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (1)

Default

Light

Dark

Code

<div class="@container w-full">
    <div class="grid gap-4 @2xl:grid-cols-3">
        <twig:StatCard label="Revenue" value="$48,250" trend="up" change="12%" period="vs last month" />
        <twig:StatCard label="Refunds" value="$1,920" trend="down" change="3.4%" period="vs last month" />
        <twig:StatCard label="Active customers" value="1,284" />
    </div>
</div>