Shadcn UI Contact Block
Contact20 has a two-row structure. The top row contains a bold headline with uppercase subtext on the left, and a three-column info area on the right showing address (with uppercase label) and a large email link. Below, a three-column form grid spans the full width with underline-style inputs for name, email, phone, a service dropdown, and a wide textarea. A ghost button with arrow icon sits at the bottom left.
Minimal styling with no backgrounds or borders on inputs, only bottom underlines. All placeholder text uses uppercase with very muted colors. The select dropdown has borderless styling matching the inputs. Form fields are arranged in a grid that flows across three columns. The email address uses large bold typography.
Editorial and sophisticated with a portfolio or agency aesthetic. The borderless form style creates an open, uncluttered feel. The three-column grid creates visual rhythm. The uppercase labels and muted placeholders feel deliberate and designed. Works best with a minimal overall page 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 |
select @shadcn | Registry |
textarea @shadcn | Registry |