Shadcn.io is not affiliated with official shadcn/ui
Stepper Compact Card
A small-footprint card stepper widget with dot indicators, micro-navigation buttons, and contextual step content built with React, Next.js, shadcn/ui, and Tailwind CSS
Embed lightweight step-by-step flows anywhere with this compact card stepper for React and Next.js. The entire wizard fits inside a narrow centered card with dot indicators in the header, step-specific content in the body, and micro-sized back and next buttons in the footer. Built with TypeScript, shadcn/ui Button and Badge components, and Tailwind CSS for inline onboarding widgets, quick setup modals, and embedded mini-wizards.
Related Components
Condensed Timeline Stepper
High-density vertical timeline with expandable rows
Single Line Stepper
All steps rendered on a single line of text
Mini Sidebar Stepper
Narrow numbered sidebar wizard navigation
Inline Breadcrumb Stepper
Breadcrumb trail repurposed as a stepper
Dot Indicators Stepper
Ultra-minimal dot-based stepper navigation
Card Content Stepper
Full-width card stepper with rich step content
FAQ
Was this page helpful?
Sign in to leave feedback.
Command Palette
A command palette style stepper navigator with search filtering and keyboard-driven step selection built with React, Next.js, shadcn/ui, and Tailwind CSS
Compact Inline
A single-line inline stepper with text-based navigation, step counter, and arrow controls built with React, Next.js, shadcn/ui, and Tailwind CSS