How do I install the Vibe UI Progress component?

You can install Progress into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add progress" in your terminal.

Does Vibe UI Progress support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

An indicator that displays the progress status of a task, typically represented as a progress bar or circle.

An indicator that displays the progress status of a task, typically represented as a progress bar or circle.

pnpm dlx vibe-ui-kit@latest add progress

Use the slider below to control and preview all progress designs in real time.

Interactive Value Controller45%

Default Style

Glassmorphic Glass

Retro Neobrutalist

Gradient Design

Neon Glow

Cyberpunk Monospace

Default

45%

Glass

45%

Retro

45%

Gradient

45%

Glow

45%

Cyberpunk

45%

An interactive tracker that calculates the page scroll depth percentage and renders real-time circular and horizontal progress metrics as you scroll.

Default Scroll

Glass Scroll

Retro Scroll

Glow Scroll

Cyberpunk Scroll

Horizontal Scroll Indicator0%

Prop	Type	Default	Description
value	number \| string	0	The current progress value (between 0 and max).
max	number \| string	100	The maximum value that progress can reach.
variant	'default' \| 'retro' \| 'glass' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant of the progress bar.
indicatorVariant	'default' \| 'success' \| 'retro' \| 'glass' \| 'gradient' \| 'glow' \| 'cyberpunk'	'default'	The visual style variant of the progress indicator bar.

Prop	Type	Default	Description
value	number \| string	0	The current progress value.
max	number \| string	100	The maximum progress value.
size	number \| string	60	The width and height of the circle in pixels.
strokeWidth	number \| string	6	The thickness of the progress ring stroke.
variant	'default' \| 'retro' \| 'glass' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant of the progress track.
indicatorVariant	'default' \| 'success' \| 'retro' \| 'glass' \| 'gradient' \| 'glow' \| 'cyberpunk'	'default'	The visual style variant of the progress indicator ring.
showValue	boolean	false	Whether to show the progress percentage text inside the circle.