Meter

Component

About

A segmented pixel-block bar that shows a level (like fuel, shields or cargo) between a min and max value, changing color at configurable warning and danger thresholds. Ported to React from the sb-meter Datastar/Rocket web component by zweiundeins (Starbase).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Meter to your project and fits it to your theme.

Code

How Meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Meter from "@/components/ui/meter";

export default function MeterThresholdsDemo() {
  return (
    <div style={{ display: "grid", gap: 16, inlineSize: "min(100%, 22rem)" }}>
      <Meter label="Cargo" value={40} unit="t" max={60} warn={45} danger={55} />
      <Meter
        label="Fuel"
        value={12}
        unit="%"
        warn={30}
        danger={15}
        segments={20}
      />
      <Meter label="Heat" value={92} unit="%" segments={8} />
    </div>
  );
}