Rich Progress

Ambient light65
Customize
Color
Size
Knob
Value65

Installation

pnpm dlx shadcn@latest add @clover-ui/rich-progress

Usage

import { RichProgress } from "@/components/rich-progress";

<RichProgress value={65} color="red" />

Make it draggable

Pass onChange and it becomes a slider you can drag or move with the arrow keys.

import { useState } from "react";
import { RichProgress } from "@/components/rich-progress";

export function Example() {
  const [value, setValue] = useState(65);

  return <RichProgress value={value} onChange={setValue} label="Volume" />;
}

Custom value label

<RichProgress value={30} valueLabel="3/10" color="emerald" />

Other ranges

The value always goes from 0 to 100. To use another range, convert it in and out.

const min = 1;
const max = 3;

<RichProgress
  value={((zoom - min) / (max - min)) * 100}
  onChange={(next) => setZoom(min + (next / 100) * (max - min))}
  label="Zoom"
  valueLabel={zoom.toFixed(2)}
/>

Props

PropType

Current value from 0 to 100.

Makes the bar draggable.

Default"default"

Shows the value on the right of the label row.

Defaulttrue

Shown instead of the number.

Knob shape. true means square, false hides it.

Default"square"