A light contact section where a sliding radio picker chooses email, call back, video call or live chat. The form below morphs to fit the channel, from a phone field with call windows to a day and slot picker or a chat preview.
Pick a channel and the form adapts. Every request lands with the same small team in Porto, not a ticket queue.
npx shadcn@latest add https://hyperblur.dev/r/contact-channel-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-channel-picker.tsx.
import { ContactChannelPicker } from "@/components/hyperblur/contact-channel-picker"
<ContactChannelPicker onSubmit={(channel, values) => console.log(channel, values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Get in touch" | Small label above the title. |
| title | string | "Talk to us the way you like to talk" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| channels | { id: "email" | "callback" | "video" | "chat"; label: string; note: string }[] | 4 channels | Options of the picker with their response note. |
| defaultChannel | "email" | "callback" | "video" | "chat" | "email" | Channel selected first. |
| days | string[] | ["Mon 16", ...] | Day buttons for the video call, as weekday and number. |
| slots | string[] | 5 times | Time slots for the video call. |
| agentName | string | "Inês" | Name shown in the chat preview. |
| onChannelChange | (channel) => void | Called when another channel is picked. | |
| onSubmit | (channel, values: Record<string, string>) => void | Promise<void> | Called with the channel and the field values after validation. | |
| accent | string | "#f05d3b" | Selected icon, focus and day color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |