Contact Section
A contact-us section with a form and micro-interactions.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
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.
npx shadcn@latest add "https://webberui.com/r/contact-section.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ContactSection />
Installation
npx shadcn@latest add "https://webberui.com/r/contact-section.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 build something together) | The section heading |
description | string | "填寫下方表單…" (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) | Text on the submit button |
successLabel | string | "已送出，感謝你！" (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(itshtmlForbound to theid), and the submit button is disabled in theloadingandsuccessstates to avoid submitting twice