Progress

Linear progress bar for values 0–100. Supports four color variants, three sizes, an optional label, and a percentage readout.

Import

tsx

import { Progress } from '@velocityuikit/velocityui'

Preview

With label and value

Upload progress68%

Variants

Sizes

Props

Prop	Type	Default	Description
value	`number`	—	Current progress value from 0 to 100.
variant	`'primary' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color of the filled bar.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Track height.
label	`string`	—	Text label shown above the bar.
showValue	`boolean`	`false`	Displays the numeric percentage to the right of the label.

Examples

Basic

tsx

import { Progress } from '@velocityuikit/velocityui'

export default function Example() {
  return <Progress value={65} label="Upload progress" showValue />
}

Variants

tsx

import { Progress } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Progress value={40} variant="primary" />
      <Progress value={72} variant="success" />
      <Progress value={55} variant="warning" />
      <Progress value={20} variant="danger" />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */