Profile Information
Tell us about yourself.
shadcn-html / steps
Built with: CSS
Steps
Multi-step progress indicator with complete, current, and upcoming states.
Default
- 1
Account
- 2
Profile
- 3
Complete
<ol class="steps">
<li class="step" data-status="complete">
<div class="step-indicator">1</div>
<div class="step-content"><p class="step-title">Account</p></div>
</li>
<li class="step" data-status="current" aria-current="step">
<div class="step-indicator">2</div>
<div class="step-content"><p class="step-title">Profile</p></div>
</li>
<li class="step">
<div class="step-indicator">3</div>
<div class="step-content"><p class="step-title">Complete</p></div>
</li>
</ol>With Form Content
Steps with descriptions, composed with a .card form panel and .btn navigation.
-
1
Account
Create credentials
-
2
Profile
Personal details
-
3
Complete
Review & confirm
With checkmarks
Complete steps show a checkmark SVG instead of the step number.
-
Account
Create credentials
-
Profile
Personal details
-
3
Complete
Review & confirm
<li class="step" data-status="complete">
<div class="step-indicator">
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3">
<path d="M20 6 9 17l-5-5"/>
</svg>
</div>
<div class="step-content">
<p class="step-title">Account</p>
<p class="step-description">Create credentials</p>
</div>
</li>Vertical
Add data-orientation="vertical" for a stacked layout with a vertical connector line.
-
Create account
Set up your email and password
-
2
Set up profile
Add your personal information
-
3
Confirmation
Review and submit
<ol class="steps" data-orientation="vertical">
<li class="step" data-status="complete">
<div class="step-indicator">
<svg aria-hidden="true" ...><path d="M20 6 9 17l-5-5"/></svg>
</div>
<div class="step-content">
<p class="step-title">Create account</p>
<p class="step-description">Set up your email and password</p>
</div>
</li>
<li class="step" data-status="current" aria-current="step">
<div class="step-indicator">2</div>
<div class="step-content">
<p class="step-title">Set up profile</p>
</div>
</li>
<li class="step">
<div class="step-indicator">3</div>
<div class="step-content">
<p class="step-title">Confirmation</p>
</div>
</li>
</ol>Error State
Add data-status="error" and aria-invalid="true" to mark a step with a validation error.
-
Account
-
Profile
Please fix the errors
-
3
Complete
<li class="step" data-status="error" aria-invalid="true">
<div class="step-indicator">
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="3">
<path d="M18 6 6 18M6 6l12 12"/>
</svg>
</div>
<div class="step-content">
<p class="step-title">Profile</p>
<p class="step-description">Please fix the errors</p>
</div>
</li>Small
Add data-size="sm" to .steps for a compact step indicator.
-
Account
-
2
Profile
-
3
Complete
<ol class="steps" data-size="sm">
<li class="step" data-status="complete">...</li>
<li class="step" data-status="current" aria-current="step">...</li>
<li class="step">...</li>
</ol>Large
Add data-size="lg" to .steps for a larger step indicator.
-
Account
Create credentials
-
2
Profile
Personal details
-
3
Complete
Review & confirm
<ol class="steps" data-size="lg">
<li class="step" data-status="complete">...</li>
<li class="step" data-status="current" aria-current="step">...</li>
<li class="step">...</li>
</ol>Clickable Steps
Add data-clickable to individual .step elements to show a pointer cursor and hover affordance on the indicator. Wire up navigation with your own JavaScript.
-
Account
-
2
Profile
-
3
Complete
<li class="step" data-status="complete" data-clickable>
<div class="step-indicator" role="button" tabindex="0"
aria-label="Go to step 1: Account">1</div>
<div class="step-content"><p class="step-title">Account</p></div>
</li>CSS view file
Styles for the steps component. Uses design tokens for colors, spacing, and radius.
@layer components {
.steps { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.step {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; text-align: center;
&:not(:last-child)::after { content: ''; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background-color: var(--border); }
&[data-status='complete']::after { background-color: var(--primary); }
&[data-status='error']::after { background-color: var(--destructive); }
}
.step-indicator {
display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
border: 2px solid var(--border); color: var(--muted-foreground); background-color: var(--background); position: relative; z-index: 1;
.step[data-status='current'] & { border-color: var(--primary); color: var(--primary); }
.step[data-status='complete'] & { border-color: var(--primary); background-color: var(--primary); color: var(--primary-foreground); }
.step[data-status='error'] & { border-color: var(--destructive); background-color: var(--destructive); color: var(--destructive-foreground); }
& svg { width: 0.875rem; height: 0.875rem; pointer-events: none; }
}
.step-content { display: flex; flex-direction: column; gap: 0.125rem; }
.step-title { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); }
.step-description { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }
/* -- Clickable steps ---------------------------------------- */
.step[data-clickable] .step-indicator {
cursor: pointer;
&:hover { opacity: 0.85; }
}
/* -- Size variants ------------------------------------------ */
.steps[data-size='sm'] {
& .step:not(:last-child)::after { top: 0.75rem; left: calc(50% + 1rem); right: calc(-50% + 1rem); }
& .step-indicator { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
& .step-indicator svg { width: 0.75rem; height: 0.75rem; }
& .step-title { font-size: 0.75rem; }
& .step-description { font-size: 0.6875rem; }
&[data-orientation='vertical'] .step:not(:last-child)::after { top: 1.75rem; left: 0.6875rem; height: calc(100% - 1.75rem); }
}
.steps[data-size='lg'] {
& .step:not(:last-child)::after { top: 1.25rem; left: calc(50% + 1.5rem); right: calc(-50% + 1.5rem); }
& .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
& .step-indicator svg { width: 1rem; height: 1rem; }
& .step-title { font-size: 0.9375rem; }
& .step-description { font-size: 0.8125rem; }
&[data-orientation='vertical'] .step:not(:last-child)::after { top: 2.75rem; left: 1.1875rem; height: calc(100% - 2.75rem); }
}
/* -- Vertical orientation ---------------------------------- */
.steps[data-orientation="vertical"] {
flex-direction: column;
gap: 0;
& .step {
flex-direction: row;
align-items: flex-start;
text-align: left;
padding-bottom: 1.5rem;
&:not(:last-child)::after {
top: 2.25rem;
left: 0.9375rem;
right: auto;
width: 2px;
height: calc(100% - 2.25rem);
}
}
& .step-content { padding-top: 0.25rem; }
}
/* -- Accessibility ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.step-indicator,
.step:not(:last-child)::after { transition: none; }
}
@media (prefers-contrast: more) {
.step-indicator { border-width: 3px; }
.step:not(:last-child)::after { height: 3px; }
.steps[data-orientation="vertical"] .step:not(:last-child)::after { width: 3px; height: calc(100% - 2.25rem); }
}
@media (forced-colors: active) {
.step-indicator {
border-color: ButtonText;
.step[data-status='current'] & { border-color: Highlight; color: Highlight; }
.step[data-status='complete'] & { border-color: Highlight; background: Highlight; color: HighlightText; }
.step[data-status='error'] & { border-color: Mark; background: Mark; color: MarkText; }
}
.step:not(:last-child)::after { background: ButtonText; }
.step[data-status='complete']:not(:last-child)::after { background: Highlight; }
.step[data-status='error']:not(:last-child)::after { background: Mark; }
}
}