Shadcn.io is not affiliated with official shadcn/ui
Settings Form
A React settings form with language and theme selects plus notification switches using React Hook Form and Zod for app preferences management
Application preferences need structured settings—this React settings form organizes preferences into logical sections with language and theme Select dropdowns, notification toggles using Switch components for email/marketing/security, and two-factor authentication control. Built with shadcn/ui Form components, React Hook Form, and Zod featuring space-y-8 section separation, bordered switch cards with flex justify-between layouts, section headings, and descriptive labels. The max-w-2xl container with sectioned organization creates scannable settings—perfect for user preferences, account settings, app configuration, or anywhere managing multiple boolean and selection preferences with clear categorization.
Settings Form preview
Installation
Related Components
Profile Edit Form
User profile information editing
Standard Switch
Toggle switch component
Standard Select
Dropdown selection component
Spacious Form
Sectioned form with generous spacing
Login Form
Authentication form
Standard Card
Card container for grouped content
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Checkout Form
A React checkout form with email, card details including expiry and CVV, billing address, and country select validated with React Hook Form and Zod