Step

Step is used to display individual steps in a process, wizard, onboarding flow, or checklist.

It supports three status states: pending, current, and completed.

Basic Usage

<Step
  number={1}
  title="Connect Account"
  description="Link your infrastructure provider"
  status="completed"
/>
<Step
  number={2}
  title="Configure Security"
  description="Set up mTLS and access policies"
  status="current"
/>
<Step
  number={3}
  title="Deploy Agent"
  description="Install and verify the PDL Agent"
  status="pending"
/>

1

Connect Account

Link your infrastructure provider

2

Configure Security

Set up mTLS and access policies

3

Deploy Agent

Install and verify the PDL Agent

Status Variants

Status	Visual Treatment	Use Case
pending	Muted / outlined	Future steps
current	Highlighted with accent	Current active step
completed	Green check + strikethrough	Finished steps

Props

Prop	Type	Default	Description
number	number	—	Step number
title	ReactNode	—	Step title
description	ReactNode	—	Step description
status	'pending' | 'current' | 'completed'	'pending'	Current state of the step
icon	ReactNode	—	Optional custom icon

Best Practices

• Use inside Card or dedicated onboarding sections
• Keep descriptions to 1 line when possible
• Combine with Timeline when showing historical progress

Related Components

• Timeline — For historical events
• Tabs — For multi-step navigation

All Foundation Components documented!