Four contact sections — details beside a validated form that morphs into a receipt, a stylised SVG map that pans to each office, an office grid with live local times, and support channel cards with availability dots.
Form and details
Newform-split.tsxContact details beside a form with topic chips, a counted message and consent; it validates inline and morphs into a sent receipt with a reference.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / title / description | string | — | Section heading copy (title renders as h2). |
details | { icon; label; value; href? }[] | — | Contact methods beside the form. |
topics | string[] | — | Multi-select topic chips. |
onSubmit | (values: { name; email; company; topics; message }) => void | Promise<void> | — | Resolve to show the receipt; throw to show the error. |
replyTime | string | "one business day" | Shown on the receipt. |
className | string | — | Classes for the outer element. |
Map card
Newmap-card.tsxA street map drawn in SVG; pins drop in on springs and choosing an office pans the map to it while the glass card crossfades its details.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / title / description | string | — | Section heading copy (title renders as h2). |
offices | { id; name; address; hours; phone?; x; y; directionsHref? }[] | — | x and y place the pin, 0–1 across the map. |
value / defaultValue | string | — | Active office id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a office is chosen. |
className | string | — | Classes for the outer element. |
Office locations
Newoffices-grid.tsxOffice cards with live local time and open or closed status, copyable addresses, a hover lift and a closing card for remote teams.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / title / description | string | — | Section heading copy (title renders as h2). |
offices | { id; city; country; address; email; timeZone; hours?: [number, number]; caption?; hq? }[] | — | Offices. timeZone is an IANA zone; hours are local 24h. |
remote | { title; body; linkLabel; href } | null | — | Closing card; null hides it. |
className | string | — | Classes for the outer element. |
Support channels
Newsupport-channels.tsxChannel cards with live availability dots, a featured chat card and whole-card hit areas, plus a row of plain help links.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / title / description | string | — | Section heading copy (title renders as h2). |
channels | { id; icon; title; description; meta?; status?: "online" | "busy" | "offline"; actionLabel; href?; onAction?; featured?; tag? }[] | — | Support channels. |
links | { label; href }[] | — | Plain links under the cards. |
className | string | — | Classes for the outer element. |
Install the whole set
Installs every contact sections variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Every field has a visible label; errors are tied with aria-describedby and focus moves to the first invalid field on submit.
- The receipt takes focus and is a status region; copy buttons announce “Address copied”.
- The map is decorative; offices are a tablist with arrow keys and the details are its tabpanel.
- Local times are computed after mount, so server and client markup match.