Shadcn UI Contact Block
Contact14 is a compact two-column card layout. The left side has a small company label, a large avatar inside a nested rounded frame with a dark outer ring and white inner background, a bold headline, and a list of contact details (email, phone, address, hours). The right side has two stacked input fields (name and phone) and a contact button. Everything sits inside a large rounded muted card.
Muted background card with very rounded corners. The avatar uses a distinctive layered frame design with a dark outer square, white inner square, and circular avatar inside. Contact details use inline label-value pairs with underlined values. Input fields have white backgrounds for contrast against the muted card. Generous padding throughout.
The layered avatar frame is the most distinctive visual element, creating a branded, polished appearance. The minimal two-field form focuses on callback requests rather than full inquiries. Compact and efficient for situations where quick contact is the goal.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
card @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |