Progress

The Progress component provides you with progress indicators.

Live Examples

Live Example

☀️

Copy

View Code

import { Progress } from '@jarllyng/nostromo' export default function ProgressExample() { return ( <div className="space-y-4"> <Progress value={33} /> <Progress value={66} /> <Progress value={100} /> </div> )...

Import


import { Progress } from "@jarllyng/nostromo";
// or
import { Progress } from "@jarllyng/nostromo/progress";

Usage


import { Progress } from "@jarllyng/nostromo";
 
export default function Example() {
  return <Progress value={75} max={100} />;
}

With Label

Live Example

☀️

Copy

View Code

import { Progress } from '@jarllyng/nostromo' export default function ProgressWithLabel() { return ( <div className="space-y-2"> <div className="flex justify-between text-sm"> <span>Upload progress</span> <span>75%</span> </div> <Progress value={75} />...

Props

Prop	Type	Default	Required	Description
`value`	`number`	-	Yes	Current progress value
`max`	`number`	`100`	No	Maximum value
`showLabel`	`boolean`	`false`	No	Whether to show percentage label
`label`	`string`	`undefined`	No	Custom label text (overrides percentage)
`animated`	`boolean`	`false`	No	Whether to animate progress changes
`glow`	`boolean`	`false`	No	Whether to show glow effect
`indeterminate`	`boolean`	`false`	No	Whether progress is indeterminate (loading)
`variant`	`"default" \| "success" \| "warning" \| "error"`	`"default"`	No	Visual variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the progress bar
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Props

The Progress component extends React.HTMLAttributes<HTMLDivElement>, so it accepts all standard HTML div attributes (e.g., id, data-*, aria-*).