FAQ Block
NewPro
A help section with search across every answer, category filters, an animated accordion and a contact card that lights up when a search finds nothing.
Customize
#ff784f
Open answers
Contact card
When to use it
- The FAQ section at the bottom of a pricing or landing page
- A small help center for an app, without a separate tool
- Pre-sale questions on a product, course or store page
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 321
Installation
FAQ Block is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy faq-block.tsx into components/ui and run npm install motion.
Usage
import { FaqBlock } from "@/components/ui/faq-block";
<FaqBlock
eyebrow="Help"
title="Questions, answered"
items={[
{ category: "Billing", question: "Can I cancel any time?", answer: "Yes. You keep access until the end of the period you paid for." },
{
category: "Account",
question: "How do I export my data?",
answer: <a href="/docs/export">Follow the export guide.</a>,
searchText: "export download backup csv",
},
]}
contact={{
action: { label: "Email support", href: "mailto:help@example.com" },
note: "We reply within one working day.",
}}
/>Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | FaqItem[] | — | Questions in display order. Each has a question and an answer, plus an optional category, id and searchText. |
| title | string | — | Section heading. |
| eyebrow | string | — | Short line above the heading. |
| subtitle | string | — | Supporting line under the heading. |
| searchPlaceholder | string | "Search the answers" | Placeholder of the search field. |
| allLabel | string | "All" | Label of the filter that shows every category. |
| contact | FaqContact | — | Card with an action, and optional title, text, secondary link, people and note. It lights up when a search finds nothing. |
| type | "single" | "multiple" | "single" | Whether one answer or any number can be open. |
| color | string | "#ff784f" | Accent for the filters, the matches and the contact button, as a hex value. |
| as | "h1" | "h2" | "h2" | Heading level. Use "h1" when this is the whole help page. |
| className | string | — | Extra classes for the section. |
Dependencies: motion