Level meter Pro

A bar of LEDs with the ballistics of a real meter. LEDs come on at once and fade out slowly, so the bar reads smoothly even when the value jumps. The peak holds for a beat, then falls. It is a native role="meter", so give it a name.

Pro preview

Installation

Terminalbash

npx @neelshha/ui@latest login
npx @neelshha/ui@latest add level-meter

Usage

page.tsxtsx

import { LevelMeter } from "@/components/ui/level-meter";

<LevelMeter value={level} aria-label="Input level" />

Vertical

Fills from the bottom. Pass fewer segments for a compact meter.

Pro previewPro previewPro preview

page.tsxtsx

<LevelMeter
  value={0.8}
  orientation="vertical"
  segments={10}
  hot={2}
  aria-label="Master"
/>

Source

API

Other props go to the outer div. Pass aria-label or aria-labelledby. With reduced motion, LEDs switch without fading.

Prop	Type	Default	Description
`value`	`number`		The level, between min and max.
`min / max`	`number`	`0 / 1`	The range.
`segments`	`number`	`16`	LEDs in the bar.
`hot`	`number`	`3`	The top LEDs that light red.
`peak`	`boolean`	`true`	Holds the highest recent level for a beat, then lets it fall an LED at a time.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Vertical fills from the bottom.