Meter
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add display/meterPlain-CSS theme — no build step
npx astrocraft-ui add display/meter --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add display/meter --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/meter --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add display/meter --theme tailwind --bridge lumosLive demo
CircularProgress & Meter
The ring is one dash the length of its own circumference, slid by stroke-dashoffset — no path maths, no clipping element. The meter is the native <meter>: a MEASUREMENT, not a task, and the only element that can say which end of its range is the good one. It ships with no appearance: none, for the same reason the Slider does — zeroing it erases the control in WebKit.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `Meter.astro` | `meter` | `data-size`: `sm` · `md` · `lg` | — | — |
Source
What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"meter"> & {
value: number;
min?: number;
max?: number;
low?: number;
high?: number;
optimum?: number;
label?: string;
size?: "sm" | "md" | "lg";
};
const {
value,
min = 0,
max = 100,
low,
high,
optimum,
label,
size = "md",
class: className,
...rest
} = Astro.props;
---
<meter
value={value}
min={min}
max={max}
low={low}
high={high}
optimum={optimum}
aria-label={label}
class={className}
data-slot="meter"
data-size={size}
{...rest}><slot>{value} / {max}</slot></meter
>
import Meter from "./Meter.astro";
export { Meter };
export default Meter;
What you get
The component source, copied into your project by npx astrocraft-ui add display/meter — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.