Progress

A neumorphism-styled progress bar component with multiple color palettes.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/progress

Then import the component:

tsx

import { Progress } from "@/components/ui/progress"

Color Palettes

Apply different color palettes to customize the progress indicator.

tsx

<Progress value={70} palette="lime" />
<Progress value={70} palette="pink" />
<Progress value={70} palette="violet" />
<Progress value={70} palette="purple" />
<Progress value={70} palette="blue-gray" />
<Progress value={70} palette="gray" />

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The progress value from 0 to 100.
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"blue-gray"`	The color palette for the progress indicator.
`className`	`string`	-	Additional CSS classes to apply.

Examples

Different Values

25%

50%

75%

100%

tsx

<div className="flex items-center gap-3">
  <Progress value={25} palette="pink" className="flex-1" />
  <span>25%</span>
</div>
<div className="flex items-center gap-3">
  <Progress value={50} palette="violet" className="flex-1" />
  <span>50%</span>
</div>
<div className="flex items-center gap-3">
  <Progress value={75} palette="purple" className="flex-1" />
  <span>75%</span>
</div>
<div className="flex items-center gap-3">
  <Progress value={100} palette="lime" className="flex-1" />
  <span>100%</span>
</div>

Empty and Full States

Empty (0%)

Full (100%)

tsx

<Progress value={0} />
<Progress value={100} palette="lime" />