shadcn.io is not affiliated with official shadcn/ui
Support Channels Contact Block for Ark UI
A support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
Installation
Overview
A support section for React with Ark UI. A compact header opens on a band of four channels on shared hairlines (live chat, email, phone and the help centre), each with its published response time and its link: mailto: and tel: links for the two that have them, laid out as a 2x2 on a phone. Under the band, on its own rule, a short note sits at the start and a real form at the end: name, email, a subject in a Select, a Normal or Urgent priority in a Segment Group and the message. Submitting it checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation in the same space that repeats the subject and priority and takes focus. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Field, Input, Select, Segment Group, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For SaaS help pages, status pages and anywhere a visitor should pick how to reach you.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your help desk or a form endpoint: details holds the name, email, subject, priority and message. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Are the response times and contact details real?
No. support@helmlight.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0173 is in the 555-0100 to 555-0199 range set aside for fiction. The labels such as "Usually within a day" are fixed text, not a live check: they should be the promises your team really keeps. Edit CHANNELS and the constants at the top of the file; the phone number keeps its order in a right-to-left layout.
What does the priority switch do?
It records Normal or Urgent in details.priority and repeats it in the confirmation. It never changes the form's behaviour, so what Urgent means (a different queue, a page to the on-call person) is yours to wire in submit. The hint under it says to keep Urgent for outages or a blocked team.
How is the subject select labelled?
The label above it names the select's button for screen readers, and focus can land on that button when the subject is missing. The subject's Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button.
How does it fit on a phone?
The header, then the channels as two rows of two short cells, then the form: its first field starts well inside the first screen. Name and email stack one per row below sm, the priority sits under the subject, the submit button goes full width, and the long email address wraps instead of scrolling the page sideways at 320 pixels.
What does the confirmation say, and who hears it?
It thanks the visitor by first name, repeats the subject and priority and the email replies go to, so a typo is easy to spot. It's a status region that takes focus when it appears, so a screen reader reads it at once, and "Send another message" brings back an empty form and puts focus on its heading. It promises no reply time: those are the published ones in the band above.