Display@knitui/components

Progress

Progress renders a filled track bar. Use <Progress value={n} /> for the simple single-section form, or the compound <Progress.Root><Progress.Section> form for stacked multi-section bars. Accent comes from the active theme palette ramp — recolor with the theme prop. orientation="vertical" rotates the track; pair with an explicit height.

WebiOSAndroid3 style slots6 own props11 examples

Stories Source Tests Open in Storybook

import { Progress } from "@knitui/components";

Playground

Loading playground…

valueFilled portion of the track, 0–100.

sizeTrack thickness — xxs through xxl size key, or a px number.

stripedDiagonal striped sheen over the fill.

false

animatedAnimates the stripes (implies striped).

false

orientationRotates the track axis.

themeActive theme accent — recolors the bar via the palette ramp.

Playground

<Progress
  value={60}
  size="md"
  striped={false}
  animated={false}
  orientation="horizontal"
/>

Examples

Sizes

All seven track thicknesses from xxs to xxl.

Loading example…

SizesSource Storybook

Values

Edge values — 0 %, 50 % and 100 % fill.

Loading example…

ValuesSource Storybook

Striped

Diagonal striped sheen applied over the fill.

Loading example…

StripedSource Storybook

Animated

Stripes animate when animated is set (implies striped).

Loading example…

AnimatedSource Storybook

Vertical

Vertical orientation — pair with an explicit height on the root.

Loading example…

VerticalSource Storybook

Themed

Palette ramp follows the active theme — same component, different accent.

Loading example…

ThemedSource Storybook

Shadows

Elevation shadow ladder applied via the inherited shadow prop.

Loading example…

ShadowsSource Storybook

Compound Stacked

Compound API — Progress.Root holds multiple Progress.Section children so values fill the track in sequence; each section can carry an inline label.

Loading example…

Compound StackedSource Storybook

Styles

Per-slot styles targets individual parts — here the section fill and its inline label.

Loading example…

StylesSource Storybook

Controlled

Controlled — value is owned by the parent and driven by a slider.

Loading example…

ControlledSource Storybook

Props

Prop	Type	Default	Description
`value` required	`number`	`60`	Filled portion of the track, 0–100.
`animated`	`boolean \| undefined`	`false`	Animates the stripes (implies striped).
`aria-label`	`string \| undefined`	`"Progress"`	Accessible label read by screen readers.
`disabled` system	`boolean \| undefined`	—
`label`	`ReactNode`	—	Optional label rendered inside the filled section.
`radius` system	`string \| number \| undefined`	—
`role`	`"progressbar" \| undefined`	`"progressbar"`	Semantic progress role.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`"md"`	Track thickness — xxs through xxl size key, or a px number.
`striped`	`boolean \| undefined`	`false`	Diagonal striped sheen over the fill.
`styles` system	`SlotStyles<ProgressStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined` unset · blue · red · green · yellow · pink · gray	—	Active theme accent — recolors the bar via the palette ramp.

Style slots

Every part of Progress can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`
`section`	`styles={{ section: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.