Metric

Installation

uvx django_shadcn@latest add metric

Not from shadcn/ui

There is no metric in the upstream registry. This one exists because a KPI dashboard is mostly this card repeated, and building it out of Card every time meant retyping the same four elements — including the only part with a rule in it, which is the delta working out its own arrow and colour.

Everything else here is ordinary typography. If you would rather compose it yourself, card and badge will get you the same place.

Usage

<c-metric>
    <c-metric.label>Revenue</c-metric.label>
    <c-metric.value>{{ revenue|floatformat:2 }}</c-metric.value>
    <c-metric.delta value="{{ change }}" label="vs. last month" />
</c-metric>

The delta reads its own sign

value is shown as it arrives, and the sign in it picks the icon and the colour — on the server, so the card is right before any JavaScript runs.

Up is not green. There is no green in the palette, and this is not the place to invent one — a project that wants it passes it in:

<c-metric.delta value="+20.1%" class="text-emerald-600 dark:text-emerald-400" />

Note that a value going up is not always good news. Churn rising is a bad month with an up arrow, which is why the component states the direction and leaves the judgement to you.

With a sparkline

A sparkline is Chart with no grid and no axes. Each axis claims its own room, so leaving them out gives the line the whole width of the card:

<c-metric>
    <c-metric.label>Revenue</c-metric.label>
    <c-metric.value>$45,231.89</c-metric.value>
    <c-metric.delta value="+20.1%" label="vs. last month" />
    <c-chart data="{{ trend }}" config="{{ config }}" class="aspect-auto h-12">
        <c-chart.plot>
            <c-chart.line data_key="revenue" dots="false" />
        </c-chart.plot>
    </c-chart>
</c-metric>

Anatomy

Props