Shadcn.io is not affiliated with official shadcn/ui
Chat Onboarding Wizard
React step-by-step onboarding wizard chat block for Next.js with progress indicator, option cards, checklist items, profile setup, and welcome screen using TypeScript, shadcn/ui, and Tailwind CSS
A conversational onboarding wizard chat interface for React and Next.js applications. Features an AI onboarding assistant that guides users through setup steps with interactive option cards, checklist items with completion toggles, a step progress indicator, and contextual help. Each step presents choices as selectable cards and confirms selections before advancing. Includes a profile completion summary and welcome screen at the end. Built with TypeScript, shadcn/ui Avatar, Badge, Button, and Progress components, Tailwind CSS, and Framer Motion for smooth message transitions. Ideal for SaaS onboarding, app setup wizards, and guided configuration flows.
Related Components
Pre-Chat Form
Form collection before chat starts
Quick Replies Chat
Chat with suggested reply buttons
Customer Support Chat
Support chat with agent avatar and rating
Education Tutor Chat
Tutoring chat with quiz cards
Empty State Chat
Chat empty state with onboarding prompts
Satisfaction Rating Chat
Chat with post-session rating prompt
FAQ
Was this page helpful?
Sign in to leave feedback.
Offline Banner
React chat offline mode block for Next.js with amber warning banner, disabled input state, visible message history, and reconnection notice using TypeScript, shadcn/ui, Tailwind CSS, and Framer Motion
Overlay Modal
React centered modal chat overlay block for Next.js with semi-transparent backdrop, animated dialog window, message thread, and inline input using TypeScript, shadcn/ui, and Tailwind CSS