Help centerPro

A search across every question and answer with your words lit up, categories with counts, answers that ask whether they helped, and support right there when nothing matches.

When to use

A searchable help center: categories with counts, answers that ask whether they helped, and support.
Self-serve support inside a product or on its site.

When not to use

Five or ten questions: FAQ split.
Support that's mostly conversation: point to chat, or Inbox.

Usage

Help center with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { HelpCenter } from "@/components/dashral/blocks/help-center"
2
3<HelpCenter
4  categories={categories}
5  faqs={articles}
6  onFeedback={(id, helpful) => api.help.feedback(id, helpful)}
7  onChat={() => openChat()}
8/>

API reference

HelpCenter

A help center: a big search across every question and answer (the words you typed lit up, / to jump to it), popular searches, categories with their counts, and the questions as cards that open. Each answer asks whether it helped — a thumbs down asks what was missing — and can copy a link to itself. When nothing matches, the support card is right there, with who's online and how fast they reply. Every part comes from props: your categories and questions, and handlers for feedback and for reaching your team.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Help center"`
`title`	`React.ReactNode`	`"How can we help?"`
`categories`	`HelpCategory[]`	`sample`
`faqs`	`Faq[]`	`sample`
`popular`	`string[]` Searches offered under the field; none hides the row.	`sample`
`defaultOpen`	`string[]` The questions open at first, by id.	`["refund"]`
`support`	`HelpSupport \| null` The support card beside the questions (under them on phones); null hides it.	`sample`
`onFeedback`	`(id: string, helpful: boolean, note?: string) => void` "Was this helpful?": yes or no for a question, with what was missing when you said so.	—
`onChat`	`(query: string) => void` "Chat with us" and "Ask the team", with the search as it stands.	—

type HelpCategory

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`icon`	`LucideIcon`	—
`blurb`	`string`	—

type Faq

Prop	Type	Default
`id`	`string`	—
`category`	`string`	—
`q`	`string`	—
`a`	`string`	—

type HelpSupport

The support card: who's there, how fast they reply, and the ways to reach them.

Prop	Type	Default
`title`	`string`	—
`body`	`string`	—
`online`	`boolean`	—
`reply`	`string`	—
`people`	`{ name: string; src?: string }[]`	—
`emailHref`	`string`	—