Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Form - Responsive Layout
A React form with responsive grid layout using grid-cols-1 md:grid-cols-2 adapting from vertical mobile to two-column desktop
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Best of both worlds—vertical on mobile for clarity, grid on desktop for efficiency. This React form uses React Hook Form with Zod validation featuring responsive grid with grid-cols-1 md:grid-cols-2 stacking Name/Email and Company/Website vertically on mobile devices switching to two-column layout on md breakpoint (768px). Built with Tailwind responsive utilities and max-w-2xl container, forms adapt to viewport—perfect for contact forms, registration, lead capture, or anywhere mobile-first design needs desktop space optimization creating universally usable forms across all screen sizes.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Layout
Always vertical all screen sizes
Grid Layout
Always two-column grid
Responsive Fields
Unvalidated responsive layout
Horizontal Layout
Compact horizontal form
Dialog Form
Responsive modal form
Accordion Form
Multi-step responsive form
Questions you might have
React Form - Grid Layout (2 Columns)
A React form with two-column grid layout for paired fields like First/Last Name, Email/Phone, City/ZIP validated with React Hook Form and Zod
React Inline Form
A React inline form with email input and subscribe button in horizontal flex layout using sr-only label for accessibility