Multi-step chatbot onboarding flow with progress tracking - shadcn/ui
Conversational onboarding that asks questions one at a time: name, use case, team size, preferred AI model, API key. Each answer appears as a user message bubble, then the bot replies and asks the next question. Progress bar at top shows step X of 5. Final step shows a summary card of all collected info with a Complete Setup button.
Preview
Explore More Blocks
BlogElegant blog components and content layouts for React and Next.js. Create beautiful article grids, post previews, author profiles, and content-rich blog experiences.
ContactProfessional contact form components and section layouts for React and Next.js. Build contact pages, feedback forms, support sections, and communication interfaces.
Web3 LoginModern Web3 authentication components for React and Next.js. Build crypto wallet login interfaces, blockchain selection screens, QR code authentication, and secure Web3 access flows with support for Metamask, Coinbase, Trust Wallet, and other popular crypto wallets.
OnboardingProfessional user onboarding and welcome components for React and Next.js. Build multi-step onboarding flows, welcome cards, stepper forms, verification screens, and guided setup experiences with customizable layouts.
Table HeaderProfessional table header components for React and Next.js. Build search bars, filter controls, category tabs, action buttons, and sorting options for data tables with flexible layouts.
EcommerceProfessional ecommerce components for React and Next.js. Build product listings, shopping carts, checkout flows, and complete online store experiences.
OrderProfessional order tracking and management components for React and Next.js. Build order details pages, tracking timelines, shipping status displays, order summaries, and delivery management interfaces with customizable layouts.
EditorialMagazine-quality editorial layouts where typography is the design. Multi-column spreads, text wrapping around images with pixel-precise line routing via Pretext, oversized words as visual anchors, pull quotes, drop caps, and the kind of spatial confidence you find in print — now in React.