Meter

Name: Nayan UI
Author: Nayan UI

A Meter component is a UI element that visually represents a scalar measurement within a known range, such as disk usage, battery level, or CPU load. It provides an at-a-glance indicator of how a value compares to its min and max thresholds.

Demo

Colors:

Storage: 30%

Battery: 60%

Memory: 80%

CPU: 95%

Sizes:

Small

Medium

Large

Usage

import { NMeter } from '@nayan-ui/react';

const Meter = () => {
  return (
    <div className="space-y-4">
      <NMeter value={30} color="accent" label="Storage: 30%" />
      <NMeter value={80} color="warning" label="Memory: 80%" />
      <NMeter value={95} color="danger" label="CPU: 95%" />
    </div>
  );
};

export default Meter;

Attributes

Name	Type	Default	Details
value	number	Required	Current meter value.
minValue	number	0	Minimum value.
maxValue	number	100	Maximum value.
label	string	Optional	Label shown in output.
showOutput	boolean	true	Show output label.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'accent'	Meter color.
size	'sm' \| 'md' \| 'lg'	'md'	Meter size.
className	string	' '	Additional CSS classes.