Shadcn.io is not affiliated with official shadcn/ui
Onboarding Dashboard Config
A dashboard widget selection block for React and Next.js with toggleable icon cards in a grid, ring selection state, and build action using shadcn/ui and Tailwind CSS
Configure dashboard layout with this widget selection onboarding block for React and Next.js built with TypeScript and shadcn/ui components. Features six widget options in a responsive two-column grid—Analytics with BarChart3Icon, Tasks with CheckSquareIcon, Calendar with CalendarIcon, Team Activity with UsersIcon, Revenue with DollarSignIcon, and Notifications with BellIcon from Lucide React. Each widget is a toggleable button card with icon, name, description, and ring-2 ring-foreground/10 selection state using Tailwind CSS utilities. Includes a live selected count display in the header and a Build Dashboard button in the footer. Uses Framer Motion staggered entrance animations and Balancer for balanced text wrapping. Perfect for dashboard onboarding, widget configuration, and personalized layout setup flows.
Related Components
React Preferences Onboarding Block
Toggle preference settings
React Template Selection Onboarding Block
Template picker
React Content Personalization Onboarding Block
Topic chip selection
React Workspace Setup Onboarding Block
Workspace configuration
React Custom Fields Onboarding Block
Field configuration
React Team Invite Onboarding Block
Team member invitation
FAQ
Was this page helpful?
Sign in to leave feedback.
Custom Fields
A custom field configuration block for React and Next.js with pre-defined fields, type badges, dynamic add field input, and Select component using shadcn/ui and Tailwind CSS
Data Import
A data import onboarding block for React and Next.js with source selection, conditional upload area, and AnimatePresence transitions using shadcn/ui and Tailwind CSS