Shadcn UI Contact Block
Contact9 has a header with a badge, large headline, and description, followed by a two-column layout. The left column contains a form with name, email, message textarea, terms checkbox, and submit button. The right column displays three contact method blocks in a two-by-two grid (with one spanning): Email, Phone, and Office. Each block has an icon next to the title, a description, and the contact detail or link.
Clean white background with bordered inputs. The badge uses an outlined style with an icon. Contact method blocks are unstyled text groups with icons positioned inline with titles. The office block includes a chevron link for directions. Inputs have a subtle card background for contrast. Simple, functional styling without decorative elements.
A balanced layout that gives equal weight to the form and contact information. The terms checkbox adds formality suitable for business contexts. The contact grid makes alternative contact methods clearly visible alongside the form.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
checkbox @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
textarea @shadcn | Registry |