Contact Support
Support hub with every channel's live status and reply time, plus a system status strip.
- Type: Contact section
- Styles: Enterprise, Light
- Licence: Charcoal UI Pro
About Contact Support
Contact Support lists every way to get help, from chat to docs, each with a live status dot and a reply time, plus a status strip with API latency underneath.
It is a full-width contact section for React and Tailwind CSS 4, in a enterprise and light style. Preview it at any width above, then install it with one command.
When to use Contact Support
- SaaS and developer tools.
- Insurance and finance.
- Monitoring and infrastructure.
- AI support platforms.
How it is built
Uses Live Dot and Sparkline. Channels and latency are props, so you can feed in real status data.
It is composed from Live Dot, Sparkline, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Contact Support
Contact Support is part of 3 full templates, so you can see it in a finished page.
- Halcyon template: Support that answers in seconds.
- Sentinel template: Know before your users do.
- Canopy template: Insurance explained in plain English.
- Contact Form: A React contact form with topic pills, inline validation and a success state
- Contact Offices: React office cards with each city's live local time and open-now status
- Contact Booking: A React book-a-demo section with a calendar, time slots and confirmation
- Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline
- Sparkline: An animated React sparkline with fill, trend colour and a pulsing end dot
Install Contact Support
npx shadcn@latest add @charcoal/contact-supportContact Support is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Contact Support work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.