Shadcn UI Contact Block
Contact6 is a feature-rich contact section with three parts: contact info cards on the left, a submission form on the right, and an office hours panel at the bottom. The left column has four stacked cards for Email, Live Chat, Phone, and Office, each with an icon, description, and link. The form includes first name, last name, email, company, message, and a terms checkbox. The footer spans full width with office hours and contact summary in a two-column layout.
Muted background cards without borders or shadows. Icons are enclosed in rounded backgrounds. The form card has no visible border but uses Card components for structure. A horizontal separator divides the main content from the office hours section. Success and error states show colored alert boxes. Loading state displays a spinning animation in the submit button.
Comprehensive and detailed with multiple contact options clearly presented. The terms checkbox adds formality while the office hours panel provides practical scheduling information. More elaborate than simple forms but maintains a clean appearance through consistent card styling.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
card @shadcn | Registry |
checkbox @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
separator @shadcn | Registry |
textarea @shadcn | Registry |