Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Meter
A graphical display of a numeric value within a range.
Storage usage75%
x
import {
Meter,
MeterIndicator,
MeterLabel,
MeterTrack,
MeterValue,
} from "mako-ui/components/meter";
export default function Particle() {
return (
<Meter value={75}>
<div className="flex items-center justify-between gap-2">
<MeterLabel>Storage usage</MeterLabel>
<MeterValue />
</div>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
</Meter>
);
}
Usage
import { Meter, MeterLabel, MeterValue } from "mako-ui/components/meter"<Meter value={40}>
<MeterLabel>Progress</MeterLabel>
<MeterValue />
</Meter>API Reference
Meter
Root component. Includes flex column layout.
MeterTrack
Track container for the meter indicator.
MeterIndicator
Visual indicator showing the current value.
MeterLabel
Label text for the meter.
MeterValue
Displays the current value.
Examples
Without Label and Value
x
import { Meter } from "mako-ui/components/meter";
export default function Particle() {
return <Meter aria-label="Storage used" value={50} />;
}
With Formatted Value
Rating3 / 5
x
"use client";
import {
Meter,
MeterIndicator,
MeterLabel,
MeterTrack,
MeterValue,
} from "mako-ui/components/meter";
export default function Particle() {
return (
<Meter max={5} value={3}>
<div className="flex items-center justify-between gap-2">
<MeterLabel>Rating</MeterLabel>
<MeterValue>{(_formatted, value) => `${value} / 5`}</MeterValue>
</div>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
</Meter>
);
}
With Range
Bandwidth (Mbps)700
x
"use client";
import {
Meter,
MeterIndicator,
MeterLabel,
MeterTrack,
MeterValue,
} from "mako-ui/components/meter";
export default function Particle() {
return (
<Meter max={1000} min={500} value={700}>
<div className="flex items-center justify-between gap-2">
<MeterLabel>Bandwidth (Mbps)</MeterLabel>
<MeterValue>{(_formatted, value) => value}</MeterValue>
</div>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
</Meter>
);
}