Nuxt UI v3 is officially released!

Components

Progress

GitHub
Show a horizontal bar to indicate task progression.

Usage

Pass an integer as the value from 0 to 100 to the Progress bar component.

70%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}
Check out the Range component for forms.

Max

You may also set the max number to set the maximum progress value, which will be relative to 100% percent.

40%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Steps

You can set an array of named steps in the max prop to show the active step, at the same time it sets the maximum value.

The first step is always shown at 0%, making the last 100%.

0%
Waiting to start
Cloning...
Migrating...
Deployed!
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Progress indicator

You can add a numeric indicator, which will show the percent on top the progress track.

20%
20%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Indeterminate

By not setting a value, or setting it as null, the progress bar becomes indeterminate. The bar will be animated as a carousel, but you can change it using the animation prop for an inverse carousel, a swinging bar or an elastic bar.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Size

Use the size prop to change the size of the progress bar.

70%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Style

Use the color prop to change the visual style of the Progress bar. The color can be any color from the ui.colors object.

70%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Slots

indicator

You can use the #indicator slot to show a custom indicator above the progress bar. It receives the current percent of progress.

🔥 Too hot!
88%
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

step-<index>

Use the #step-<index> to alter the HTML being shown for each step.

50%
Cloning...
Migrating...
Deploying...
{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Props

size
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
config.default.size
value
number
null
color
"primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose"
config.default.color
max
number | any[]
100
ui
{ wrapper?: string; indicator?: DeepPartial<{ container: { base: string; width: string; transition: string; }; align: string; width: string; color: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; progress?: DeepPartial<{ base: string; width: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; rounded: string; track: string; bar: string; color: string; background: string; indeterminate: { base: string; rounded: string; }; }, any>; steps?: DeepPartial<{ base: string; color: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; step?: DeepPartial<{ base: string; align: string; active: string; first: string; }, any>; animation?: DeepPartial<{ carousel: string; 'carousel-inverse': string; swing: string; elastic: string; }, any>; default?: DeepPartial<{ color: string; size: string; animation: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }
{}
animation
"carousel" | "carousel-inverse" | "swing" | "elastic"
config.default.animation
indicator
boolean
false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Popover

Display a non-modal dialog that floats around a trigger element.

RadioGroup

Display a set of radio buttons.