Shadcn UI Contact Block
Contact33 uses a two-column layout with a form on the left and a single rounded image on the right. The form includes a large headline, description, and fields for name, email, subject dropdown, and message. The image fills a rounded container that matches the full height of the form section.
The subject field uses a Select dropdown with inquiry type options like General, Project, Collaboration, and Press. The submit button is left-aligned on desktop and full-width on mobile. The image is hidden on mobile to focus on the form.
Clean and balanced with architectural photography adding visual interest without overwhelming. The single image creates a focused composition compared to multi-image stacks. Works well for architecture firms, interior designers, studios, or any business wanting a professional but approachable contact section.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
textarea @shadcn | Registry |
select @shadcn | Registry |