shadcn.io is not affiliated with official shadcn/ui
Contact Support Billing Block for Radix UI
A billing help panel: pick a topic (refund, invoice copy, tax ID change, failed payment, plan change), see its routes fastest first, copy the support address, edit a prefilled message, and use one button that follows the fastest route.
Installation
Overview
Send each billing question to the quickest answer, with this contact support section for React with Radix UI. It shows Helmgate, a scheduling app. A hairline frame with a plus mark on each corner holds a list of five topics beside the routes for the chosen one, fastest first: do it yourself in the app (with a link to the page), chat during typed hours, or email with the address shown in a mono line and a Copy Button. There is no mail link. Under the routes a subject and message are prefilled for the topic, with the last invoice number in them, and can be edited with Input and Textarea. The one Shine Button follows the fastest route: "Open Tax details", "Start chat" or "Copy the message", which really copies the address, subject and message to the clipboard. On a phone the topics become a Native Select. It's built from Field, Input, Textarea, Native Select, Copy Button, Badge, Shine Button and Guides, with a CSS entrance only. For help pages and any subscription app.
FAQ
How do I add a topic or change its routes?
Edit TOPICS. Each has a name, the sentence its message opens with and two routes; the first is the fastest and decides the button's label. A self-serve route names the page in your app, a chat route carries its hours and an email route is the support address. Keep the same number of routes per topic so the panel keeps its height when the topic changes.
What is real in the demo?
The clipboard. Copy the message writes the address, the subject and the message to the clipboard, and the small button beside the address copies the address alone. If the browser refuses (it needs a secure page), the status line says so. Choosing a topic rewrites the message for it, which the status line states.
What stays local, and how do I wire it?
Opening a page and starting a chat only say what they would do. Nothing is sent. In your app link the self-serve routes to your own pages, open your chat widget from the chat route, and keep the address as plain text with its copy button if you do not want to open a mail client.
How do the chat hours work?
They are typed text ("Open until 18:00 UTC. Answers in minutes."). Your app should compute them from your support rota and show when chat is closed.