Progress steps components

Powerful and customizable React progress step components built for modern applications and websites. These progress steps are built using React Aria and styled with Tailwind CSS.

Progress steps example

Get the code

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

Your details

Please provide your name and email

2

Company details

A few details about your company

3

Invite your team

Start collaborating with your team

4

Add your socials

Share posts to your social accounts

Installation

You can add this progress steps component using our CLI or manually:

npx untitledui@latest add progress-steps

Progress steps examples

Below are examples and variations of this progress steps component:

Icon centered

Get the code

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Your details

Please provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Add your socials

Share posts to your social accounts

Icon centered with number

Get the code

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

Your details

Please provide your name and email

2

Company details

A few details about your company

3

Invite your team

Start collaborating with your team

4

Add your socials

Share posts to your social accounts

Icon with text

Get the code

Your details

Please provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Add your socials

Share posts to your social accounts

Icon with number

Get the code

Your details

Please provide your name and email

2

Company details

A few details about your company

3

Invite your team

Start collaborating with your team

4

Add your socials

Share posts to your social accounts

Featured icon with text

Get the code

Your details

Please provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Add your socials

Share posts to your social accounts

Minimal icons

Get the code

Step 1 of 4

Text with line

Get the code

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Your details

Please provide your name and email

Company details

A few details about your company

Invite your team

Start collaborating with your team

Add your socials

Share posts to your social accounts

API reference

Import the parts and assemble them:

import { Progress } from "@/components/application/progress-steps/progress-steps";
 
const steps = [{ title: "Your details", description: "Name and email", status: "complete", icon: User01 }];
 
<Progress.IconsWithText items={steps} />

IconLeft

Import IconLeft from @/components/application/progress-steps/progress-step-base. Renders a <div> element.

IconLeft props
PropTypeDefaultDescription
title* (required)string—Bold label naming the step.
description* (required)string—Supporting line rendered directly beneath the title.
size
"sm""md"
"sm"Scale of the step marker and its text.
type
"number""featured-icon""icon"
—Marker style of the step. Progress.IconsWithText reads it to pick which step variant to render; the step components themselves ignore it.
connectorbooleantrueWhether the line running from this step towards the next one is drawn. Inside Progress.IconsWithText it is combined with the component-level connector, so false only ever hides the trailing step's line — every other step keeps its connector — while true adds a line after the last step.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.
iconIconType—Icon drawn inside the step's marker. It is required by the "featured-icon" type and ignored by the dot and number markers.

IconLeftNumber

Import IconLeftNumber from @/components/application/progress-steps/progress-step-base. Renders a <div> element.

IconLeftNumber props
PropTypeDefaultDescription
title* (required)string—Bold label naming the step.
description* (required)string—Supporting line rendered directly beneath the title.
step* (required)number—The step's position in the sequence, printed inside the circle until the step is complete and a tick replaces it. Progress.IconsWithText fills this in from the item's index.
size
"sm""md"
"sm"Scale of the step marker and its text.
type
"number""featured-icon""icon"
—Marker style of the step. Progress.IconsWithText reads it to pick which step variant to render; the step components themselves ignore it.
connectorbooleantrueWhether the line running from this step towards the next one is drawn. Inside Progress.IconsWithText it is combined with the component-level connector, so false only ever hides the trailing step's line — every other step keeps its connector — while true adds a line after the last step.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.
iconIconType—Icon drawn inside the step's marker. It is required by the "featured-icon" type and ignored by the dot and number markers.

IconOnly

Import IconOnly from @/components/application/progress-steps/progress-step-base. Renders a <span> element.

IconOnly props
PropTypeDefaultDescription
size
"sm""md"
"sm"Scale of the step marker and its text.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.

IconTop

Import IconTop from @/components/application/progress-steps/progress-step-base. Renders a <div> element.

IconTop props
PropTypeDefaultDescription
title* (required)string—Bold label naming the step.
description* (required)string—Supporting line rendered directly beneath the title.
size
"sm""md"
"sm"Scale of the step marker and its text.
type
"number""featured-icon""icon"
—Marker style of the step. Progress.IconsWithText reads it to pick which step variant to render; the step components themselves ignore it.
connectorbooleantrueWhether the line running from this step towards the next one is drawn. Inside Progress.IconsWithText it is combined with the component-level connector, so false only ever hides the trailing step's line — every other step keeps its connector — while true adds a line after the last step.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.
iconIconType—Icon drawn inside the step's marker. It is required by the "featured-icon" type and ignored by the dot and number markers.

IconTopNumber

Import IconTopNumber from @/components/application/progress-steps/progress-step-base. Renders a <div> element.

IconTopNumber props
PropTypeDefaultDescription
title* (required)string—Bold label naming the step.
description* (required)string—Supporting line rendered directly beneath the title.
step* (required)number—The step's position in the sequence, printed inside the circle until the step is complete and a tick replaces it. Progress.IconsWithText fills this in from the item's index.
size
"sm""md"
"sm"Scale of the step marker and its text.
type
"number""featured-icon""icon"
—Marker style of the step. Progress.IconsWithText reads it to pick which step variant to render; the step components themselves ignore it.
connectorbooleantrueWhether the line running from this step towards the next one is drawn. Inside Progress.IconsWithText it is combined with the component-level connector, so false only ever hides the trailing step's line — every other step keeps its connector — while true adds a line after the last step.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.
iconIconType—Icon drawn inside the step's marker. It is required by the "featured-icon" type and ignored by the dot and number markers.

Progress.IconsWithText

Renders a <div> element.

Progress.IconsWithText props
PropTypeDefaultDescription
items* (required)ItemsType<T>[]—The steps to render, in the order they are shown.
type
"number""featured-icon""icon"
"icon"Marker style used for every step: a dot-and-tick circle, a numbered circle, or a featured icon.
connectorbooleantrueWhether the lines linking the steps are drawn at all. Setting it to false hides every connector and overrides the per-item connector values.
size
"sm""md"
"sm"Scale of the step markers and their text.
orientation
"vertical""horizontal"
"vertical"Whether the steps run across in a row or stack into a single column.
classNamestring—Additional CSS classes to apply to the wrapper.

Progress.MinimalIcons

Renders a <div> element.

Progress.MinimalIcons props
PropTypeDefaultDescription
items* (required)(Step & { icon?: IconType; })[]—The steps to render, in the order they are shown, each carrying its own status.
textbooleanfalseWhether to prefix the markers with a "Step x of y" counter, where x is the number of items with a "complete" status.
size
"sm""md"
"sm"Scale of the step markers and their text.
orientation
"vertical""horizontal"
—Whether the steps run across in a row or stack into a single column.
classNamestring—Additional CSS classes to apply to the wrapper.

Progress.MinimalIconsConnected

Renders a <div> element.

Progress.MinimalIconsConnected props
PropTypeDefaultDescription
items* (required)(Step & { icon?: IconType; })[]—The steps to render, in the order they are shown, each carrying its own status.
size
"sm""md"
"sm"Scale of the step markers and their text.
orientation
"vertical""horizontal"
"horizontal"Whether the steps run across in a row or stack into a single column.
classNamestring—Additional CSS classes to apply to the wrapper.

Progress.TextWithLine

Renders a <div> element.

Progress.TextWithLine props
PropTypeDefaultDescription
items* (required)(Step & { icon?: IconType; })[]—The steps to render, in the order they are shown, each carrying its own status.
size
"sm""md"
"sm"Scale of the step markers and their text.
orientation
"vertical""horizontal"
"horizontal"Whether the steps run across in a row or stack into a single column.
classNamestring—Additional CSS classes to apply to the wrapper.

TextLine

Import TextLine from @/components/application/progress-steps/progress-step-base. Renders a <div> element.

TextLine props
PropTypeDefaultDescription
title* (required)string—Bold label naming the step.
description* (required)string—Supporting line rendered directly beneath the title.
size
"sm""md"
"sm"Scale of the step marker and its text.
type
"number""featured-icon""icon"
—Marker style of the step. Progress.IconsWithText reads it to pick which step variant to render; the step components themselves ignore it.
connectorboolean—Whether the line running from this step towards the next one is drawn. Inside Progress.IconsWithText it is combined with the component-level connector, so false only ever hides the trailing step's line — every other step keeps its connector — while true adds a line after the last step.
status
"incomplete""current""complete"
"incomplete"Where the step sits in the flow. "incomplete" renders a muted, low-contrast marker, "current" highlights the marker and its text, and "complete" replaces the marker's dot with a tick and colors the connector leading out of the step.
iconIconType—Icon drawn inside the step's marker. It is required by the "featured-icon" type and ignored by the dot and number markers.

FAQs

Please refer to our frequently asked questions page for more.

The components are grouped under a single Progress object with four entries: Progress.IconsWithText (a step marker plus title and description), Progress.MinimalIcons (markers only, optionally with a step counter), Progress.MinimalIconsConnected (markers joined by a line), and Progress.TextWithLine (a colored bar above each label).

Every variant is driven by an items array of steps, each { title, description, status, icon? }. status is "incomplete", "current" or "complete", and it drives the marker fill, the connector color and the text colors. Completed dot and number markers render a tick. There is no active-index prop, so you set status on each item yourself.

Pass type to Progress.IconsWithText. It accepts "icon" (the default dot or tick marker), "number" (the step position, switching to a tick on a success background once complete), and "featured-icon" (a FeaturedIcon in the gray modern theme). With "featured-icon" the icon property on each item is required.

All four variants accept a size prop of "sm" or "md", defaulting to "sm". The size changes the dot and number markers from size-6 to size-8 (featured icons go from "md" to "lg"), the text from text-sm to text-md, and the spacing between steps.

Yes, via the orientation prop, which accepts "vertical" or "horizontal". Progress.IconsWithText defaults to "vertical", while Progress.MinimalIconsConnected and Progress.TextWithLine default to "horizontal". The examples on this page render both and toggle them with className="max-md:hidden" and className="md:hidden" so the stepper stacks on mobile.

Pass connector={false} to Progress.IconsWithText to drop the connectors entirely. Otherwise a connector is drawn after every step and hidden automatically after the last one. Use Progress.MinimalIcons if you want markers with no connectors at all.

Pass the text prop to Progress.MinimalIcons. It renders a Step {completed} of {total} label before the markers, where the completed count is the number of items whose status is "complete".

Pie chartsRadar charts