Shadcn.io is not affiliated with official shadcn/ui
React Custom Fields Onboarding Block
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
Configure custom fields during onboarding with this React and Next.js block built with TypeScript and shadcn/ui components. Features three pre-defined fields—Name, Email, Status—displayed as non-editable rows with shadcn/ui Badge components showing field types. Includes a PlusIcon button that dynamically appends new editable rows with shadcn/ui Input for field names and Select dropdown for types (Text, Number, Date, Select). Uses AnimatePresence for smooth add/remove animations, XIcon buttons to delete custom fields, and a Save Fields button in the footer showing total count. Built with Framer Motion staggered entrance animations, Balancer for balanced heading text, and Tailwind CSS utilities. Perfect for CRM onboarding, project management setup, and database schema configuration flows.
React Custom Fields Onboarding Block preview
Installation
Related Components
React Workspace Setup Onboarding Block
Workspace creation
React Preferences Onboarding Block
User preference configuration
React Template Selection Onboarding Block
Template picker
React Data Import Onboarding Block
CSV import
React Dashboard Config Onboarding Block
Widget selection
React Integrations Onboarding Block
Third-party connections
FAQ
Was this page helpful?
Sign in to leave feedback.
React Content Personalization Onboarding Block
A content preference personalization block for React and Next.js with toggleable topic chips, selection counter, and validation using shadcn/ui and Tailwind CSS
React Dashboard Config Onboarding Block
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