Shadcn.io is not affiliated with official shadcn/ui
Stepper Assignee Avatars
A horizontal stepper with assignee avatar circles, overlapping avatar groups, and colored rings for step status built with React, Next.js, shadcn/ui, and Tailwind CSS
Visualize team ownership across workflow steps with this assignee avatars horizontal stepper for React and Next.js. Each step displays one or more avatar circles with initials below the step indicator, with emerald rings for completed assignees and blue rings for the active step owner. Multiple assignees on a single step render as an overlapping avatar group. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for sprint boards, project trackers, and team collaboration dashboards.
Related Components
With Descriptions Stepper
Horizontal stepper with title and description lines per step
Time Estimates Stepper
Vertical stepper with estimated time badges per step
Due Dates Stepper
Vertical stepper with due date labels and overdue indicators
Status Badges Stepper
Vertical stepper with prominent status badges per step
Horizontal Icons Stepper
Horizontal stepper using unique icons instead of numbers
Journey Map Stepper
Stepper visualized as a customer journey map
FAQ
Was this page helpful?
Sign in to leave feedback.
Application Form
A professional job application form stepper with horizontal numbered steps, progress bar, structured form fields, and save draft functionality built with React, Next.js, shadcn/ui, and Tailwind CSS
Attachment Counts
A vertical stepper with file attachment indicators, file type labels, and upload areas per step built with React, Next.js, shadcn/ui, and Tailwind CSS