Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Profile Edit Form
A React profile form with username, email, bio textarea with character counter, and optional website URL validated with React Hook Form and Zod
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
User profiles need editable fields—this React profile form combines text inputs for username and email, Textarea for bio with live 160-character counter, and optional website URL with proper validation. Built with shadcn/ui Form components, React Hook Form, and Zod featuring space-y-6 generous spacing, FormDescription context for each field, pre-filled defaultValues, and action buttons with Save/Cancel options. The max-w-2xl container with section heading creates organized settings experience—perfect for user profiles, account management, social bios, or anywhere users customize public information.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Signup Form
New user registration with validation
Settings Form
App preferences with switches
Standard Textarea
Multi-line text input component
Spacious Form
Sectioned form with generous spacing
Standard Button
Action button component
Login Form
Authentication with email and password
Questions you might have
React Signup Form
A React signup form with name, email, password validation using regex patterns, and terms checkbox validated with React Hook Form and Zod
React Contact Form
A React contact form with name, email, subject select dropdown, and message textarea validated with React Hook Form and Zod for customer inquiries