Components

Progress steps

Step-by-step progress for multi-step flows: icon, number or featured-icon steps with text, minimal dot rows, and a text-with-line bar. components/application/progress-steps/.

Complex component - it composes FeaturedIcon (foundations) with its own step primitives. Use it to show a fixed, short sequence. The sections of a form are shown by this same component, vertically, in column 2: see the form pattern.

Component Playground

Live instance.

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Controls

Layout

Type

Orientation

Size

Current step

Icons with text

Progress.IconsWithText. Give a step onClick to make it a button, for going back to a completed step. Three step types: icon (a dot, with a tick once complete), number (the step number, a tick once complete) and featured-icon (your own icon in a FeaturedIcon). Horizontal centres each step over a connector; vertical stacks them with the text on the right.

Icon - horizontal / vertical

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Number - horizontal / vertical

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Featured icon - horizontal / vertical

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Sizes - SM / MD

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

Minimal icons

Progress.MinimalIcons is a row of dots with an optional "Step n of m" label; MinimalIconsConnected joins them with a line. No titles, for tight spaces.

MinimalIcons (text) / MinimalIcons / MinimalIconsConnected

Step 1 of 4

Text with line

Progress.TextWithLine: a bar above each title. Filled for complete and current steps, grey for the rest.

Horizontal

Project details

Name, abstract and dates.

Data collection

Extent, focus and method.

Privacy

Embargo and restrictions.

Review

Check and create.

API

Progress.IconsWithText

Prop	Type	Default
`items`	`Step[] (icon required for featured-icon)`	`-`
`type`	`"icon" \| "number" \| "featured-icon"`	`"icon"`
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`size`	`"sm" \| "md"`	`"sm"`
`connector`	`boolean`	`true`
`className`	`string`	`-`

Progress.MinimalIcons / MinimalIconsConnected / TextWithLine

Prop	Type	Default
`items`	`Step[]`	`-`
`size`	`"sm" \| "md"`	`"sm"`
`text`	`boolean (MinimalIcons only: shows "Step n of m")`	`false`
`orientation`	`"vertical" \| "horizontal" (MinimalIconsConnected only)`	`"horizontal"`
`className`	`string`	`-`

Step (each item)

Prop	Type	Default
`title`	`string`	`-`
`description`	`string (optional)`	`-`
`status`	`"incomplete" \| "current" \| "complete"`	`-`
`icon`	`icon component (featured-icon type)`	`-`
`connector`	`boolean (per-step override)`	`-`
`onClick`	`() => void`	`-`
`error`	`boolean (icon type)`	`-`

Usage

import { Progress } from "@/components/application/progress-steps/progress-steps";
import { Folder, Lock01 } from "@untitledui/icons";

const items = [
  { title: "Project details", description: "Name and dates.", status: "complete", icon: Folder },
  { title: "Privacy", description: "Embargo and restrictions.", status: "current", icon: Lock01 },
];

<Progress.IconsWithText items={items} type="featured-icon" orientation="horizontal" />
<Progress.MinimalIcons items={items} text />
<Progress.TextWithLine items={items} />

Figma

Not linked yet. This component was pulled in via the Untitled UI CLI. Untitled UI's own design stands (including the number type completing in green while the icon type completes in brand) until the designer normalises it in Figma; the shipped styling is not yet audited against a frame.