Progress - Turbopills UI

Solid

A continuous filled bar representing percentage completion.

Demo

Installation

pnpm dlx shadcn@latest add @turbopills-ui/progress-solid

Usage


tsx
1import { ProgressSolid } from "@/components/turbopills/ui/progress/progress-solid"


tsx
1<ProgressSolid value={45} />

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0–100).
`animated`	`boolean`	`true`	Enables a smooth width transition.
`filledClassName`	`string`	—	Additional class names for the filled portion of the bar.
`unfilledClassName`	`string`	—	Additional class names for the unfilled background.
`className`	`string`	—	Additional class names for the root element.

Cells

The bar is split into equally-sized rounded cells, each filling independently.

Demo

Installation

pnpm dlx shadcn@latest add @turbopills-ui/progress-cells

Usage


tsx
1import { ProgressCells } from "@/components/turbopills/ui/progress/progress-cells"


tsx
1<ProgressCells
2  value={60}
3  steps={[
4    { label: "Info" },
5    { label: "Address" },
6    { label: "Payment" },
7    { label: "Review" },
8    { label: "Done" },
9  ]}
10/>

With Labels

Info

Address

Payment

Review

Done

Props

ProgressCellsProps

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0–100).
`steps`	`ProgressStep[] \| number`	`4`	Number of cells, or an array of step objects with optional `label` and `tooltip`.
`highlightCurrent`	`boolean`	`false`	Adds a ring highlight to the currently active cell.
`cellGap`	`number`	`8`	Gap in pixels between cells.
`animated`	`boolean`	`true`	Enables smooth fill transitions.
`filledClassName`	`string`	—	Additional class names for filled cells.
`unfilledClassName`	`string`	—	Additional class names for unfilled cells.
`currentClassName`	`string`	—	Additional class names for the current (active) cell.
`className`	`string`	—	Additional class names for the root element.

ProgressStep

Prop	Type	Default	Description
`label`	`string`	—	Text displayed below the step.
`tooltip`	`string`	—	Tooltip shown on hover.

Numbered

Circular numbered badges connected by lines — ideal for multi-step wizards. Automatically collapses with ellipsis when space is limited.

Demo

Installation

pnpm dlx shadcn@latest add @turbopills-ui/progress-numbered

Usage


tsx
1import { ProgressNumbered } from "@/components/turbopills/ui/progress/progress-numbered"


tsx
1<ProgressNumbered
2  value={50}
3  highlightCurrent
4  steps={[
5    { label: "Info", tooltip: "Personal information" },
6    { label: "Address", tooltip: "Shipping address" },
7    { label: "Payment", tooltip: "Payment details" },
8    { label: "Review", tooltip: "Review order" },
9    { label: "Done", tooltip: "Order placed" },
10  ]}
11/>

With Labels & Tooltips

Info

Address

Payment

Review

Done

Props

ProgressNumberedProps

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0–100).
`steps`	`ProgressStep[] \| number`	`4`	Number of steps, or an array of step objects with optional `label` and `tooltip`.
`highlightCurrent`	`boolean`	`false`	Adds a ring highlight to the active step circle.
`animated`	`boolean`	`true`	Enables smooth transitions.
`filledClassName`	`string`	—	Additional class names for filled step circles.
`unfilledClassName`	`string`	—	Additional class names for unfilled step circles.
`currentClassName`	`string`	—	Additional class names for the current step circle.
`className`	`string`	—	Additional class names for the root element.

ProgressStep

Prop	Type	Default	Description
`label`	`string`	—	Text displayed below the step circle.
`tooltip`	`string`	—	Tooltip shown on hover.

Stretch

Segmented cells where the currently active cell expands to take more space, drawing attention to the current step.

Demo

Installation

pnpm dlx shadcn@latest add @turbopills-ui/progress-stretch

Usage


tsx
1import { ProgressStretch } from "@/components/turbopills/ui/progress/progress-stretch"


tsx
1<ProgressStretch
2  value={50}
3  highlightCurrent
4  steps={[
5    { label: "Info" },
6    { label: "Address" },
7    { label: "Payment" },
8    { label: "Review" },
9    { label: "Done" },
10  ]}
11/>

With Labels

Info

Address

Payment

Review

Done

Props

ProgressStretchProps

Prop	Type	Default	Description
`value`	`number`	`0`	Completion percentage (0–100).
`steps`	`ProgressStep[] \| number`	`4`	Number of cells, or an array of step objects with optional `label` and `tooltip`.
`highlightCurrent`	`boolean`	`false`	Adds a ring highlight to the active cell.
`cellGap`	`number`	`4`	Gap in pixels between cells.
`currentWeight`	`number`	`8`	Flex weight of the current (active) cell.
`collapsedWeight`	`number`	`1`	Flex weight of non-current cells.
`animated`	`boolean`	`true`	Enables smooth transitions for fill and flex.
`filledClassName`	`string`	—	Additional class names for filled cells.
`unfilledClassName`	`string`	—	Additional class names for unfilled cells.
`currentClassName`	`string`	—	Additional class names for the current cell.
`className`	`string`	—	Additional class names for the root element.

ProgressStep

Prop	Type	Default	Description
`label`	`string`	—	Text displayed below the step.
`tooltip`	`string`	—	Tooltip shown on hover.