Feature Request: Circular Progress Component

Package

v4.x

Description

Hi! I'd like to revive the request for a Circular Progress component in Nuxt UI.

Background

This was previously attempted in #4120 (which also resolved #3728), where a circular variant was added to UProgress. The PR was closed in November 2025 by @benjamincanac as it was never finished, with the note: "Feel free to reopen based on the v4 branch."

Additionally, Reka UI already provides a Circular Progress example, demonstrating that the underlying primitive layer supports this pattern. This makes a Nuxt UI implementation well-aligned with the existing foundation.

Problem

The current UProgress component only supports linear (horizontal/vertical) progress indicators. In many UI scenarios — dashboards, stats cards, profile completion, loading states, timers — a circular/radial progress indicator is the more natural and space-efficient choice. Currently, developers need to either build a custom SVG-based solution or pull in a third-party library, which breaks consistency with the Nuxt UI design system.

Proposed Solution

A circular variant on the existing UProgress component (as originally proposed in #4120), or a dedicated UCircularProgress component — whichever fits the v4 architecture better.

Suggested API

<template>
  <UProgress variant="circular" :model-value="75" />
</template>

Props (extending the existing Progress API)

• variant — "linear" (default) | "circular"
• model-value — Current progress value (supports v-model)
• max — Maximum value (default: 100)
• size — 2xs | xs | sm | md | lg | xl | 2xl
• color — primary | secondary | success | error | warning | info | neutral
• thickness — Stroke width of the circular track and indicator
• status — Display the current value in the center of the circle
• animation — Indeterminate animation styles (e.g., spin, pulse)
• inverted — Visually invert the progress direction

Slots

• default — Custom content rendered in the center of the circle (icons, labels, formatted values)
• status — Override the default status display

Example Usage

<!-- Basic circular -->
<UProgress variant="circular" :model-value="65" />

<!-- With centered status -->
<UProgress variant="circular" :model-value="65" status />

<!-- Custom center content -->
<UProgress variant="circular" :model-value="3" :max="5">
  <template #default="{ value, max, percent }">
    <span class="text-sm font-medium">{{ value }}/{{ max }}</span>
  </template>
</UProgress>

<!-- Indeterminate -->
<UProgress variant="circular" />

Prior Art & References

• Previous Nuxt UI PR: #4120 (closed, was targeting v3)
• Related issue: #3728
• Reka UI Circular Progress example: reka-ui.com/examples/progress-circular
• Vuetify v-progress-circular
• Chakra UI CircularProgress
• Material UI CircularProgress

Given that Reka UI already supports this pattern and there's clear community interest (the original issue and PR), this seems like a natural addition for v4.

Thanks for considering this!

Additional context

No response

Start by reading the existing UProgress component and the closed PR #4120, then compare their approach with the v4 architecture and the referenced Reka UI circular progress example. The work is done when Nuxt UI has a settled circular-progress API, either as a UProgress variant or a dedicated component, covering the proposed sizing, status, slots, and indeterminate behavior.