Navigation
Progress Stepper
A horizontal stepper for onboarding, generation pipelines, and design workflows.
stepsprogressworkflow
Installation
Copy and paste the code into your project.
Accessibility notes
The ordered list preserves step sequence; add current-step state in production.
- 1Brief
- 2Design
- 3Code
Preview accent
TypeScript
const stages = ["Brief", "Design", "Code"];
export function ProgressStepper() {
return (
<ol className="flex w-full max-w-sm items-center">
{stages.map((stage, index) => (
<li key={stage} className="flex flex-1 items-center">
<span className="grid h-9 w-9 shrink-0 place-items-center rounded-full border border-[#40E0D0]/30 bg-[#40E0D0]/10 text-xs font-bold text-[#d8fffb]">
{index + 1}
</span>
<span className="ml-2 text-xs font-semibold text-slate-300">{stage}</span>
{index < stages.length - 1 ? <span className="mx-3 h-px flex-1 bg-gradient-to-r from-[#40E0D0]/60 to-[#a78bfa]/40" /> : null}
</li>
))}
</ol>
);
}Usage
<ProgressStepper />Related components
- 1Parse brief
- 2Create variants
- 3Ship preview
AI Interfaces
Agent Step Timeline
A simple ordered timeline for AI agents, build systems, and workflow progress.
agenttimelinesteps
Navigation
Floating Nav Dock
A pill-shaped navigation dock with translucent depth and compact labels.
navdockglass
Navigation
Context Menu Panel
A floating action menu for editor surfaces, AI workspaces, and command-rich tools.
menuactionsfloating