Contact Section: React + Tailwind Component

A contact section with floating labels, a focus underline that expands, an item-by-item reveal, and a submit state transition — ready to use out of the box.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/contact-section.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Section titletitle

Subheadingdescription

Submit button labelsubmitLabel

Success message after submittingsuccessLabel

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ContactSection/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/contact-section.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/contact-section.

Usage

import { ContactSection } from "@/components/ui/contact-section";

<ContactSection
  title="Let's build something together"
  description="Fill in the form below, or reach us through any of these channels."
  onSubmit={async (values) => {
    await fetch("/api/contact", {
      method: "POST",
      body: JSON.stringify(values),
    });
  }}
/>

When no onSubmit is provided, the component presents the submitting → success state transition with a built-in simulated delay, which makes the interaction easy to preview. It only switches to the success state once the Promise returned by onSubmit resolves.

Props

Prop	Type	Default	Description
`title`	`string`	`"Let's do something together!"` (Let's build something together)	The section heading
`description`	`string`	`"EnterBottomForms…"` (Fill in the form below…)	The section's subheading description
`info`	`ContactInfoItem[]`	three built-in items	The contact information list on the left
`submitLabel`	`string`	`"Send message"` (Send message)	Text on the submit button
`successLabel`	`string`	`"Sent, thank you!"` (Sent — thank you!)	Text shown after a successful submit
`onSubmit`	`(values) => void \| Promise<void>`	—	The submit handler; when it returns a Promise, the component waits for it to resolve
`className`	`string`	—	Forwarded to the outer container

ContactInfoItem has the shape { icon: "mail" | "phone" | "map"; label: string; hint?: string }, and values has the shape { name: string; email: string; message: string }.

Accessibility

When the user has "reduce motion" enabled at the system level, every reveal, the floating labels, and the state transitions switch instantly instead, with no offset and no blur
Every input field has a matching label (its htmlFor bound to the id), and the submit button is disabled in the loading and success states to avoid submitting twice

Contact Section