Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add progress

<template>
  <UiProgress>
    <UiProgressIndicator :style="{ transform: `translateX(-${100 - (modelValue || 0)}%)` }" />
  </UiProgress>
</template>

Progress10%

Loading...0%

Popover

Displays rich content in a portal, triggered by a button.

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.