Shadcn.io is not affiliated with official shadcn/ui
Empty State Getting Started
An onboarding checklist empty state with progress indicator, four setup steps with checkboxes, and completion tracking built with React, Next.js, shadcn/ui, and Tailwind CSS
Guide new users through workspace setup with this onboarding checklist empty state block. Features a progress bar showing completion status, four interactive setup steps with checkboxes, descriptive labels for each task, and a visual cue for the next recommended action. Built with React, Next.js, shadcn/ui Checkbox and Button, motion/react staggered animations, and Tailwind CSS.
Related Components
Welcome Workspace Empty State
Fresh workspace greeting with explore CTA
First Project Empty State
Create first project prompt
Invite Team Empty State
Team invitation prompt state
No Tasks Empty State
Empty task board state
Connect Tools Empty State
Integration connection prompt
No Preferences Empty State
Unconfigured preferences state
FAQ
Was this page helpful?
Sign in to leave feedback.
First Project
A split-layout empty state prompting users to create their first project with an illustration area on the left and encouraging copy with CTA on the right, built with React, Next.js, shadcn/ui, and Tailwind CSS
Invite Team
An empty state prompting users to invite team members with avatar placeholders, email input field, and invite CTA built with React, Next.js, shadcn/ui, and Tailwind CSS