components / 17

marked progress

progress should look like work being made. the line grows from the same hand that marks completion.

shadcnnpx shadcn@latest add berkantay/cheez/marked-progress

live

playground

64% complete

18% is buffered ahead.

progress

64%

buffer

82%

indeterminate

variant

size

character

value

segments

ink

<MarkedProgress
  label="rendering preview"
  value={64}
  variant="marker"
  size="medium"
  character="rushed"
  buffer={82}
  valuePosition="label"
  color="#8f74ff"
/>

lifecycle

every state

empty to complete

empty

starting

buffered

segmented

indeterminate

complete

character

three drawing tools

same value, different pressure

line

marker

boxed

composition

release pipeline

several tasks, one rhythm

all packages are clean.

39 of 48 suites finished.

working through dependency order.

starts after every build passes.

formatting

not everything is a percent

visible and spoken values

48 MB remaining

reference

api

one composed Base UI progress root

prop	type	default	purpose
`value`	`number \| null`	`required`	current amount; null is indeterminate
`min`	`number`	`0`	minimum value
`max`	`number`	`100`	completion value
`label`	`ReactNode`	`required`	accessible progress label
`description`	`ReactNode`	`—`	connected supporting copy
`variant`	`"line" \| "marker" \| "boxed"`	`"line"`	ink and track treatment
`size`	`"small" \| "medium" \| "large"`	`"medium"`	track and type scale
`valuePosition`	`"label" \| "track" \| "none"`	`"label"`	visible value placement
`formatValue`	`(value, percentage) => ReactNode`	`percent`	custom visible value
`getAriaValueText`	`function`	`Base UI`	custom spoken value
`buffer`	`number`	`—`	secondary loaded amount
`bufferColor`	`string`	`muted purple`	secondary ink
`segments`	`number`	`0`	up to twenty visual divisions
`color`	`string`	`"#8f74ff"`	active ink
`trackColor`	`string`	`muted white`	baseline or frame ink
`completeColor`	`string`	`"#b7ff3c"`	completion ink
`indicatorMark`	`CheezType`	`variant-aware`	active drawing override
`trackMark`	`CheezType`	`"rounded-box"`	boxed boundary drawing
`completeMark`	`CheezType`	`"check"`	completion glyph
`character`	`CheezCharacter`	`"rushed"`	drawing personality
`thickness`	`number`	`1`	pen weight
`locale`	`Intl.LocalesArgument`	`runtime`	Base UI number locale
`format`	`Intl.NumberFormatOptions`	`—`	Base UI raw number formatting

behavior notes

Base UI provides the progressbar role, value range, label connection, and status attributes
values outside the declared range are clamped before rendering or announcing
null removes aria-valuenow and switches to indeterminate progress
the moving indeterminate element is a completed Cheez stroke, not a generic shimmer
segments and buffers are visual supplements; the numeric value remains the source of truth
completion changes both color and shape by drawing a check beside the value