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

Rendered live, with the same build of the library you install.

Colors:

Storage30%

Battery60%

Memory80%

CPU95%

Sizes:

Small50%

Medium50%

Large50%

Usage

Source

Meter.tsx

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

const Meter = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Colors:</h3>
      <div className="space-y-4 max-w-sm mb-5">
        <NMeter value={30} color="accent" label="Storage" />
        <NMeter value={60} color="success" label="Battery" />
        <NMeter value={80} color="warning" label="Memory" />
        <NMeter value={95} color="danger" label="CPU" />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Sizes:</h3>
      <div className="space-y-4 max-w-sm">
        <NMeter value={50} size="sm" label="Small" />
        <NMeter value={50} size="md" label="Medium" />
        <NMeter value={50} size="lg" label="Large" />
      </div>
    </div>
  );
};

export default Meter;

Attributes

13 props

Name	Type	Default	Details
value	number	Required	Current meter value.
minValue	number	0	Minimum value.
maxValue	number	100	Maximum value.
label	React.ReactNode	Optional	What is being measured, at the start of the row.
output	React.ReactNode	Optional	The reading, at the end of the row. Defaults to a percentage.
showOutput	boolean	true	Show the reading.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'accent'	Meter color.
size	'sm' \| 'md' \| 'lg'	'md'	Meter size.
className	string	' '	Additional CSS classes.
labelClassName	string	' '	Classes for the label.
outputClassName	string	' '	Classes for the reading.
trackClassName	string	' '	Classes for the track.
fillClassName	string	' '	Classes for the filled portion.