Stat

A single metric block. Compose from parts.

Real use · dashboard KPIs

New users

1,204

↗︎ 3.2% this month

Revenue

$14,300

↗︎ 12.4% this month

Churn

1.8%

↘︎ 0.6% this month

Vertical layout

Storage used

72 GB

of 100 GB

Bandwidth

1.2 TB

this billing cycle

Glass · KPI band over a colored hero

New users

1,204

↗︎ 3.2% this month

Revenue

$14,300

↗︎ 12.4% this month

Churn

1.8%

↘︎ 0.6% this month

Using Stat

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Stat — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class stat, with 6 modifiers:

.stat
.stat-desc
.stat-figure
.stat-title
.stat-value
.stats
.stats-vertical

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Stat } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
vertical	boolean	no	Stack the blocks vertically instead of inline.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import {
    Stats,
    Stat,
    StatTitle,
    StatValue,
    StatDesc,
    StatFigure,
} from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";
import { UserIcon } from "../lib/icons";

export function StatDemo() {
    return (
        <>
            <Section title="Real use · dashboard KPIs">
                <Stats>
                    <Stat>
                        <StatFigure>
                            <UserIcon />
                        </StatFigure>
                        <StatTitle>New users</StatTitle>
                        <StatValue>1,204</StatValue>
                        <StatDesc>↗︎ 3.2% this month</StatDesc>
                    </Stat>
                    <Stat>
                        <StatTitle>Revenue</StatTitle>
                        <StatValue>$14,300</StatValue>
                        <StatDesc>↗︎ 12.4% this month</StatDesc>
                    </Stat>
                    <Stat>
                        <StatTitle>Churn</StatTitle>
                        <StatValue>1.8%</StatValue>
                        <StatDesc>↘︎ 0.6% this month</StatDesc>
                    </Stat>
                </Stats>
            </Section>

            <Section title="Vertical layout">
                <Stats vertical className="max-w-xs">
                    <Stat>
                        <StatTitle>Storage used</StatTitle>
                        <StatValue>72 GB</StatValue>
                        <StatDesc>of 100 GB</StatDesc>
                    </Stat>
                    <Stat>
                        <StatTitle>Bandwidth</StatTitle>
                        <StatValue>1.2 TB</StatValue>
                        <StatDesc>this billing cycle</StatDesc>
                    </Stat>
                </Stats>
            </Section>

            <Section title="Glass · KPI band over a colored hero">
                <div
                    className="rounded-box p-8"
                    style={{
                        backgroundImage:
                            "linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))",
                    }}
                >
                    <Stats className="glass">
                        <Stat>
                            <StatFigure>
                                <UserIcon />
                            </StatFigure>
                            <StatTitle>New users</StatTitle>
                            <StatValue>1,204</StatValue>
                            <StatDesc>↗︎ 3.2% this month</StatDesc>
                        </Stat>
                        <Stat>
                            <StatTitle>Revenue</StatTitle>
                            <StatValue>$14,300</StatValue>
                            <StatDesc>↗︎ 12.4% this month</StatDesc>
                        </Stat>
                        <Stat>
                            <StatTitle>Churn</StatTitle>
                            <StatValue>1.8%</StatValue>
                            <StatDesc>↘︎ 0.6% this month</StatDesc>
                        </Stat>
                    </Stats>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Stat — a .stats container holding one .stat (title / value / desc from props). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Stat", "stat", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "stat stat-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Stat, on every path, is available through the Silica MCP server.