Meter

One ratio against a limit, turning amber then red as the allowance runs out.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Meter } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Meter label="Seats" value={14} max={25} formatValue={(v) => String(v)} />
      <Meter
        label="Training hours"
        value={78}
        max={100}
        formatValue={(v) => `${v}h`}
      />
      <Meter
        label="Storage"
        value={470}
        max={500}
        formatValue={(v) => `${v} GB`}
      />
    </div>
  );
}

— elia design system · MIT · charts · https://github.com/aile-sh/elia