Meter

Usage

import { Meter } from '@hareui/vue'

Storage60%

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <Meter aria-label="Storage" class="w-64" label="Storage" :value="60" /></template>

HeroUI's Label, Meter.Output, Meter.Track and Meter.Fill parts are rendered by the component. Reka UI has no meter primitive, so the root carries React Aria's meter semantics (role="meter progressbar", aria-valuenow, aria-valuetext) itself.

<Meter :value="60" label="Storage">
  <template #label /> <!-- optional: replaces the label text -->
  <template #output="{ percentage, valueText }" /> <!-- optional: replaces the value text -->
</Meter>

The label renders when the label prop or #label slot is provided, and labels the meter via aria-labelledby.
The output renders next to a label; set show-output to force it on or off.

ui keys: base, label, output, track, fill.

Examples

Sizes

Small40%

Medium60%

Large80%

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <div class="flex w-64 flex-col gap-6">    <Meter color="success" label="Small" size="sm" :value="40" />    <Meter color="accent" label="Medium" size="md" :value="60" />    <Meter color="warning" label="Large" size="lg" :value="80" />  </div></template>

Colors

Default50%

Accent50%

Success50%

Warning50%

Danger50%

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <div class="flex w-64 flex-col gap-6">    <Meter color="default" label="Default" :value="50" />    <Meter color="accent" label="Accent" :value="50" />    <Meter color="success" label="Success" :value="50" />    <Meter color="warning" label="Warning" :value="50" />    <Meter color="danger" label="Danger" :value="50" />  </div></template>

Without Label

When no visible label is needed, use aria-label for accessibility.

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <Meter aria-label="Storage usage" class="w-64" :value="45" /></template>

Custom Value Scale

Use min-value, max-value, and format-options to customize the value range and display format.

Revenue$750.00

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <Meter    class="w-64"    :format-options="{ currency: 'USD', style: 'currency' }"    label="Revenue"    :max-value="1000"    :min-value="0"    :value="750"  /></template>

Customization

Tailwind CSS

Use the class prop for the root and the ui prop for the label, output, track and fill:

Storage used68%

<script setup lang="ts">import { Meter } from '@hareui/vue'</script><template>  <Meter    aria-label="Storage used"    class="w-64"    label="Storage used"    :ui="{      label: 'font-medium text-foreground',      output: 'text-muted tabular-nums',      track: 'rounded-full bg-default',      fill: 'rounded-full bg-warning',    }"    :value="68"  /></template>

Global theme override

Override the meter theme app-wide with createHareUI:

app.use(createHareUI({
  ui: {
    meter: {
      slots: {
        base: 'w-full gap-2',
        track: 'h-3 rounded-full',
        fill: 'rounded-full',
      },
    },
  },
}))

Styling Reference

Each rendered element carries the same data-slot string as HeroUI, so selectors translate 1:1.

`ui` key	`data-slot`	Description
`base`	`meter`	Base container (grid layout)
`label`	`label`	Label text (Label theme plus the grid placement)
`output`	`meter-output`	Value text display
`track`	`meter-track`	Track background
`fill`	`meter-fill`	Filled portion of the track

HeroUI's modifier classes correspond to props (HareUI renders utilities, not BEM classes, so style through class, ui or createHareUI):

size: sm (thinner track), md (default), lg (thicker track) (.meter--{size})
color: default, accent (default), success, warning, danger (.meter--{color})

API Reference

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The current value (clamped to `minValue`–`maxValue`).
`minValue`	`number`	`0`	The minimum value.
`maxValue`	`number`	`100`	The maximum value.
`formatOptions`	`Intl.NumberFormatOptions`	`{ style: 'percent' }`	Number format for the value display. Percent formats the fraction of the range.
`valueLabel`	`string`	-	Custom value text (e.g. `'3 of 4'`), replacing the formatted value in the output and `aria-valuetext`.
`label`	`string`	-	Visible label, rendered in the top-left grid area and referenced by `aria-labelledby`.
`showOutput`	`boolean`	`undefined`	Whether to render the value output. Defaults to showing it when there is a label.
`size`	`"md" \| "sm" \| "lg"`	`'md'`	Size of the meter track.
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`'accent'`	Color of the fill bar.
`ui`	`ComponentSlots<{ slots: { base: string[]; label: string; output: string; track: string; fill: string; }; variants: { color: { default: { base: string; }; accent: { base: string; }; success: { base: string; }; warning: { base: string; }; danger: { base: string; }; }; size: { sm: { track: string; fill: string; }; md: {}; lg: { track: string; fill: string; }; }; }; defaultVariants: { color: string; size: string; }; }>`	-	Per-slot class overrides.

Slots

Slot	Props	Description
`label`	`MeterSlotProps`	Replaces the label text.
`output`	`MeterSlotProps`	Replaces the value output text.

#label and #output receive:

Prop	Type	Description
`percentage`	`number`	The percentage of the meter (0-100)
`valueText`	`string`	The formatted value text