Progress

free

Progress shows how far a task or value has advanced, as a line or a circular gauge.

Storage used62 GB of 100 GB

62%

import Progress from '@/components/ui/progress';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Progress

pnpm dlx nateui@latest add Progress

yarn dlx nateui@latest add Progress

Examples

Basic

45%

import Progress from '@/components/ui/progress';

export default function BasicDemo() {
  return (

Circle

80%

import Progress from '@/components/ui/progress';

export default function CircleDemo() {
  return (

Size

50%

import Progress from '@/components/ui/progress';

export default function SizeDemo() {
  return (

Color

38%
74%
92%

import Progress from '@/components/ui/progress';

export default function ColorDemo() {
  return (

Custom Info

68%

completed

import { PiCheckCircle, PiWarning } from 'react-icons/pi'
import Progress from '@/components/ui/progress';

export default function CustomInfoDemo() {

Gap

75%

import Progress from '@/components/ui/progress';

export default function GapDemo() {
  return (

Controlled

40%

import { useState } from 'react';
import { PiMinus, PiPlus } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Progress from '@/components/ui/progress';

API

Progress renders a line or circle indicator driven by percent. The line variant grows a bar and places its label beside it; the circle variant draws a gauge and centers its label. size applies to the line; width, gapDegree, gapPosition, strokeWidth, and strokeLinecap shape the circle.

Prop	Description	Type	Default
`variant`	Indicator shape to render.	`'line' \| 'circle'`	`'line'`
`percent`	Completion value from 0 to 100.	`number`	`0`
`showInfo`	Whether the percentage label is shown.	`boolean`	`true`
`customInfo`	Replaces the default `${percent}%` label.	`string \| ReactNode`	-
`size`	Line thickness. Applies to the `line` variant only.	`'sm' \| 'md'`	`'md'`
`strokeClass`	Class applied to the filled indicator. Defaults to the primary color.	`string`	-
`trailClass`	Class applied to the unfilled track.	`string`	-
`width`	Diameter of the circle, in pixels or a CSS size. Circle only.	`string \| number`	`120`
`gapDegree`	Size of the gap in the circle ring, in degrees (0–360). Circle only.	`number`	`0`
`gapPosition`	Where the ring gap sits. Circle only.	`GapPosition`	`'top'`
`strokeWidth`	Thickness of the circle ring stroke. Circle only.	`number`	`6`
`strokeLinecap`	Shape of the circle stroke ends. Circle only.	`StrokeLinecap`	`'round'`
`className`	Class names applied to the progress root.	`string`	-
`ref`	Ref forwarded to the root element.	`Ref<HTMLDivElement>`	-
`...nativeProps`	Native div props applied to the root element.	`ComponentProps<'div'>`	-

Types

type GapPosition = 'top' | 'right' | 'bottom' | 'left';
type StrokeLinecap = 'round' | 'square';