Free React Contact Section Components
Most contact pages are a form nobody wants to fill in. These components offer better-fitting shapes: channel cards that route people to the right inbox, a split-map layout for physical businesses, a callback strip for phone-first customers, an email spotlight for the minimalists, and a project brief form for agencies that want qualified leads instead of "hi, how much for a website". Each one is honest about how you actually want to be contacted.
6 components · MIT licensed · installable with the shadcn CLI
Contact Callback Strip
Slim request-a-callback band in React, one tel field, a morning or afternoon window picker and an honest callback promise, collapsing to a confirmation. Tailwind micro form.
Contact Channel Cards
Pick-your-channel contact tiles, email, call, visit, each a working link with a quiet response-time promise; the single recommended channel carries the primary keyline.
Contact Email Spotlight
Minimal contact block that commits to one channel, the email address set at display scale as a working mailto with copy-to-clipboard and a quiet response promise. React + Tailwind.
Contact Project Brief
Project inquiry form that composes a brief, radio-chip fieldsets for type, budget and timeline with a live mono summary line. An honest React and Tailwind contact form for agencies.
Contact Split Map
Contact section with a token-drawn SVG map, abstract street grid, primary pin, office switcher, and working tel, mailto and directions links. React + Tailwind, no map embed.
Contact Split Panel
Seam-divided contact section, left a form done right with visible labels and honest validation, right the office in mono: hours, address, working tel and mailto links.
Frequently asked questions
Do the contact forms send email out of the box?
No, they are frontend components with an onSubmit callback. Wire them to your API route, a form service like Formspree, or your CRM. The demos show the validation and success states you get for free.
Which contact component converts best for a service business?
For trades and local services, the callback strip usually wins, a phone number and a two-field "we call you" form beats a long form. Agencies see better-qualified leads from the project brief component, which asks scope questions upfront.
Is the map in the split-map layout a live map?
The layout reserves a map region and accepts any child, a static map image, an embedded Google Map, or a Mapbox canvas. The demo uses a styled static placeholder so the component ships with zero API keys.