Progress

Outer sketch bar plus an inner fill drawn with slightly higher roughness, so it looks hand-filled.

Roughness1.5Lock seedValue62.0

<Progress value={62} roughness={1.5} />

Usage

import { Progress } from "doodleui-react";

<Progress value={62} max={100} />

Exposes role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax.

Prop	Type	Default	Notes
value	number	0	Current value.
max	number	100	Maximum value. Sets aria-valuemax.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.