Three support channel cards for docs, priority support and community with response-time chips and a pointer tilt, followed by a minimal inline question field.
Support
Pick the fastest route to an answer. Every channel is staffed by the engineers who build the product.
Guides, API reference and recipes for every feature, updated with each release.
A named engineer who knows your setup, with a guaranteed first reply.
Ask the 24,000 builders in our forum and Discord. Staff drop in every day.
npx shadcn@latest add https://hyperblur.dev/r/contact-support-cards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-support-cards.tsx.
import { ContactSupportCards } from "@/components/hyperblur/contact-support-cards"
<ContactSupportCards onSubmit={async ({ question }) => createTicket(question)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Support" | Small pill above the title. |
| title | string | "How can we help?" | Section heading. |
| subtitle | string | "Pick the fastest route to an answer..." | Supporting line under the heading. |
| channels | { icon: "docs" | "community" | "priority"; title; description; response; points: string[]; cta: { label; href }; badge?: string; featured?: boolean }[] | Documentation, Priority support, Community | Channel cards. featured adds the accent glow, badge adds a small label next to the title. |
| askLabel | string | "Still stuck? Ask us directly." | Label above the question field. |
| askPlaceholder | string | "How do I rotate API keys without downtime?" | Placeholder of the question field. |
| successMessage | string | "Got it. Your question is in the queue..." | Message shown after the question is sent. |
| onSubmit | (values: { question: string }) => void | Promise<unknown> | Called with the question once it has at least 10 characters. A returned promise keeps the loading state until it settles; a rejection shows its message. | |
| accent | string | "#a78bfa" | Featured card glow, chips and focus ring color. |