Meter

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 Meter — it needs no JavaScript, so the classes below are the whole story.

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

Root class meter, with 18 modifiers:

• .meter
• .meter-accent
• .meter-error
• .meter-header
• .meter-indicator
• .meter-info
• .meter-label
• .meter-lg
• .meter-md
• .meter-neutral
• .meter-primary
• .meter-secondary
• .meter-sm
• .meter-success
• .meter-track
• .meter-value
• .meter-warning
• .meter-xl
• .meter-xs

React

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

npm i @wizeworks/silicaui-react

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

Props

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.

import { Meter } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";
import { COLORS, SIZES } from "../lib/data";

export function MeterDemo() {
    return (
        <>
            <Section title="Colors">
                <div className="grid max-w-md gap-4">
                    {COLORS.slice(0, 6).map((color) => (
                        <Meter key={color} color={color} value={65} label={color} showValue />
                    ))}
                </div>
            </Section>

            <Section title="Sizes">
                <div className="flex max-w-md flex-col gap-3">
                    {SIZES.map((size) => (
                        <Meter key={size} color="primary" size={size} value={60} />
                    ))}
                </div>
            </Section>

            <Section title="Real use · gauges">
                <div className="grid max-w-md gap-4">
                    <Meter color="warning" value={92} label="Storage used" showValue />
                    <Meter color="success" value={78} label="Battery" showValue />
                    <Meter color="error" value={12} min={0} max={100} label="Credit score risk" showValue />
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Meter — a static measurement (not task advancement, unlike Progress); same bucketed-literal-width technique so the fill needs no inline style. 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("Meter", "meter", { /* 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 "meter meter-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup