Progress steps — DrumKit

Demo

hero

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

Component

type

orientation

size

connector

import { Progress } from "@/components/application/progress-steps/progress-steps"; import type { ProgressIconType } from "@/components/application/progress-steps/progress-types"; const steps: ProgressIconType[] = [ { title: "Your details", description: "Name and email", status: "complete", }, { title: "Company details", description: "Website and location", status: "current", }, { title: "Invite your team", description: "Start collaborating", status: "incomplete", }, { title: "Add your socials", description: "Automatic sharing", status: "incomplete", }, ]; <Progress.IconsWithText orientation="horizontal" items={steps} />

In context

in-context

View in a page

Family

family

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

Progress.IconsWithText

Step 3 of 4

Progress.MinimalIcons

Progress.MinimalIconsConnected

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

Progress.TextWithLine

Types

cells

Three types at both sizes, one step per status.

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

icon, size sm

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

icon, size md

Details

Name and email

2

Shipping

Where to send it

3

Payment

Card or bank

number, size sm

Details

Name and email

2

Shipping

Where to send it

3

Payment

Card or bank

number, size md

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

featured-icon, size sm

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

featured-icon, size md

Layouts

cells

Horizontal, size sm

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

type icon, horizontal, size sm

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

type number, horizontal, size sm

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

type featured-icon, horizontal, size sm

Horizontal, size md

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

type icon, horizontal, size md

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

4

Add your socials

Automatic sharing

type number, horizontal, size md

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

Add your socials

Automatic sharing

type featured-icon, horizontal, size md

Vertical

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

type icon, vertical, size sm

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

type icon, vertical, size md

MinimalIcons

Step 3 of 4

MinimalIcons, type icon, size sm

Step 3 of 4

MinimalIcons, type icon, size md

Step 3 of 4

34

MinimalIcons, type number, size sm

Step 3 of 4

34

MinimalIcons, type number, size md

MinimalIconsConnected

MinimalIconsConnected, type icon, size sm

MinimalIconsConnected, type icon, size md

3

4

MinimalIconsConnected, type number, size sm

3

4

MinimalIconsConnected, type number, size md

TextWithLine, horizontal

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

TextWithLine, horizontal, size sm

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

TextWithLine, horizontal, size md

TextWithLine, vertical

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

TextWithLine, vertical, size sm

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

TextWithLine, vertical, size md

Content

cells

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

three steps, horizontal

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

the column's long supporting text in a horizontal row

Details

Name and email

Shipping

Where to send it

Payment

Card or bank

Review

Check and confirm

one-word checkout titles on TextWithLine

Your details

Company details

Invite your team

Add your socials

empty description, vertical

Behaviour

cells

Connectors

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

connector false

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

connector on the last item

The number connector

type number, framed at phone width

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

type number, the page's own width

The minimal label

text false

Step 2 of 4

no current step

States

cells

IconOnly

incomplete, size sm

current, size sm

complete, size sm

incomplete, size md

current, size md

complete, size md

NumberOnly

1

incomplete, size sm

2

current, size sm

complete, size sm

1

incomplete, size md

2

current, size md

complete, size md

In a row

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

type icon: tick, halo, dot

Your details

Name and email

2

Company details

Website and location

3

Invite your team

Start collaborating

type number: tick, ring, dimmed ring

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

type featured-icon: tile, gray glyph, dimmed text

Your details

Name and email

Company details

Website and location

Invite your team

Start collaborating

TextWithLine: brand bar, brand text, gray bar