Components

Meter

GitHub
Display a gauge meter that fills or depletes.

Usage

Use the value prop from 0 to 100 to set a value for the meter bar.

<template>
  <UMeter :value="25" />
</template>
Check out the Range component for inputs

Min & Max

By default, min is 0 and max is 100. You can change either of these using their respective props, even for negative numbers.

<template>
  <UMeter :value="-25" :min="-50" :max="50" />
</template>

Indicator

You may show a percentage indicator on top of the meter using the indicator prop.

35% 
<template>
  <UMeter :value="35" indicator />
</template>

Label

Add a label below the meter using the label prop.

Disk usage
<template>
  <UMeter label="Disk usage" :value="86" />
</template>

Icon

You may also add an icon to the start label using the icon prop.

Disk usage
<template>
  <UMeter icon="i-heroicons-server" :value="86" label="Disk usage" />
</template>

Size

Change the size of the meter bar using the size prop.

75%
CPU Load
<template>
  <UMeter size="md" indicator label="CPU Load" :value="75.4" />
</template>

Style

The color prop changes the visual style of the meter bar. The color can be any color from the ui.colors object.

80%
Memory usage
<template>
  <UMeter color="primary" :value="80" indicator label="Memory usage" />
</template>

Group

To group multiple meters into a group, adding all values, use the MeterGroup component.

  • To change the overall minimum and maximum value, pass the min and max props respectively.
  • To change size of all meters, use the size prop.
  • To show an indicator for the overall amount, set the indicator prop or slot.
  • To change the color of each meter, use the color prop.
  • To show a label for each meter, use the label prop on each meter.
  • To change the icon for each meter, use the icon prop.
67%
  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
<template>
  <UMeterGroup :min="0" :max="128" size="md" indicator icon="i-heroicons-minus">
    <UMeter :value="24" color="gray" label="System" />
    <UMeter :value="8" color="red" label="Apps" />
    <UMeter :value="12" color="yellow" label="Documents" />
    <UMeter :value="42" color="green" label="Multimedia" />
    <!-- Total: 86 -->
  </UMeterGroup>
</template>
When the Meters are grouped, their individual indicators and label slots are stripped away.

A Meter group can also be used with an indicator slot, and even individual meter icons.

86GB used

42GB remaining

  1. System (19%)
  2. Apps (6%)
  3. Documents (9%)
  4. Multimedia (33%)
<template>
  <UMeterGroup :max="128">
    <template #indicator>
      <div class="flex gap-1.5 justify-between text-sm">
        <p>86GB used</p>
        <p class="text-gray-500 dark:text-gray-400">
          42GB remaining
        </p>
      </div>
    </template>

    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
  </UMeterGroup>
</template>

Slots

indicator

Use the #indicator slot to change the indicator shown at the top of the bar. It receives the current meter percent.

84.2GB used (35%) 
<script setup lang="ts">
const used = ref(84.2)

const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #indicator="{ percent }">
      <div class="text-sm text-right">
        {{ used }}GB used ({{ Math.round(percent) }}%)
      </div>
    </template>
  </UMeter>
</template>

label

The label slot can be used to change how the label below the meter bar is shown. It receives the current meter percent.

You are using 84GB (65%) of space 

<script setup lang="ts">
const used = ref(84.2)

const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #label="{ percent }">
      <p class="text-sm">
        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
      </p>
    </template>
  </UMeter>
</template>

Props

ui
{ wrapper?: string; indicator?: DeepPartial<{ container: string; text: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; meter?: DeepPartial<...>; label?: DeepPartial<...>; color?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl"
config.default.size
max
number
100
value
number
0
label
string
null
icon
string
null
color
string
config.default.color
min
number
0
indicator
boolean
false
size
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
meterConfig.default.size
min
number
0
max
number
100
icon
string
meterGroupConfig.default.icon
ui
{ wrapper?: string; base?: string; background?: string; transition?: string; rounded?: string; shadow?: string; list?: string; orientation?: DeepPartial<{ 'rounded-none': { left: string; right: string; }; 'rounded-sm': { ...; }; ... 6 more ...; 'rounded-full': { ...; }; }, any>; default?: DeepPartial<...>; } & { ......
{}
indicator
boolean
false

Config

{
  wrapper: 'w-full flex flex-col gap-2',
  indicator: {
    container: 'min-w-fit transition-all',
    text: 'text-gray-400 dark:text-gray-500 text-end',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  meter: {
    base: 'appearance-none block w-full bg-none overflow-y-hidden',
    background: 'bg-gray-200 dark:bg-gray-700',
    color: 'text-{color}-500 dark:text-{color}-400',
    ring: '',
    rounded: 'rounded-full',
    shadow: '',
    size: {
      '2xs': 'h-px',
      xs: 'h-0.5',
      sm: 'h-1',
      md: 'h-2',
      lg: 'h-3',
      xl: 'h-4',
      '2xl': 'h-5'
    },
    appearance: {
      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
    },
    bar: {
      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
      ring: '',
      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
      size: {
        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
      }
    }
  },
  label: {
    base: 'flex gap-2 items-center',
    text: 'truncate',
    color: 'text-{color}-500 dark:text-{color}-400',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  color: {
    white: 'text-white dark:text-black',
    black: 'text-black dark:text-white',
    gray: 'text-gray-500 dark:text-gray-400'
  },
  default: {
    size: 'md',
    color: 'primary'
  }
}

{
  wrapper: 'flex flex-col gap-2 w-full',
  base: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
  background: 'bg-gray-200 dark:bg-gray-700',
  transition: 'transition-all',
  rounded: 'rounded-full',
  shadow: '',
  list: 'list-disc list-inside',
  orientation: {
    'rounded-none': {
      left: 'rounded-s-none',
      right: 'rounded-e-none'
    },
    'rounded-sm': {
      left: 'rounded-s-sm',
      right: 'rounded-e-sm'
    },
    rounded: {
      left: 'rounded-s',
      right: 'rounded-e'
    },
    'rounded-md': {
      left: 'rounded-s-md',
      right: 'rounded-e-md'
    },
    'rounded-lg': {
      left: 'rounded-s-lg',
      right: 'rounded-e-lg'
    },
    'rounded-xl': {
      left: 'rounded-s-xl',
      right: 'rounded-e-xl'
    },
    'rounded-2xl': {
      left: 'rounded-s-2xl',
      right: 'rounded-e-2xl'
    },
    'rounded-3xl': {
      left: 'rounded-s-3xl',
      right: 'rounded-e-3xl'
    },
    'rounded-full': {
      left: 'rounded-s-full',
      right: 'rounded-e-full'
    }
  },
  default: {
    size: 'md',
    icon: 'i-heroicons-minus-20-solid'
  }
}

Link

Render a NuxtLink but with superpowers.

Modal

Display a modal within your application.