Shadcn UI Contact Block
Contact18 is a two-column layout with decorative elements. The left column has an oversized headline with small red corner bracket illustrations, four support feature items with red square icons and chevron-up arrows, and a large email link at the bottom. The right column contains a form with four rounded muted-background inputs (name, phone optional, email, message) and a full-width rounded submit button.
Clean white background with red accent color for the decorative brackets and icon backgrounds. The headline uses very large bold typography. Support features are displayed as a vertical list with squared icon containers. Form inputs have rounded corners, muted backgrounds, and uppercase placeholder text. The submit button is full-width with uppercase text.
Playful and confident with the corner bracket decorations adding personality. The support feature list with icons communicates value before the form. The red accents create visual interest without overwhelming. A balance between creative expression and functional form design.
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 |