Manicat UI

FAQ section

FAQs as an accordion, a topic rail, or a searchable list that highlights matches.

Preview
FAQ section preview

Frequently asked questions

Everything you need to know before you install your first component.

  • Manicat UI is a library of React components and blocks built on Motion and Radix. You copy the source into your project, so every line is yours to change.

When to use

  • FAQ sections on pricing, product, and support pages.
  • Long FAQs that benefit from categories or live search.

When not to use

  • Use accordion for generic collapsible content that is not a question list.
  • Use a docs page when answers need code, images, or long structure.

shadcn CLI

Also installs (3)

  • manicat-foundation
  • search-field
  • segmented-control
Manual install(+)
registry.jsonjson
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-section",
  "type": "registry:block",
  "title": "FAQ section",
  "description": "FAQs as an accordion, a topic rail, or a searchable list that highlights matches.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/search-field.json",
    "https://manicat.viraza.net/r/segmented-control.json"
  ],
  "files": [
    {
      "path": "registry/blocks/faq-section/faq-section.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/faq-section/faq-section.tsx"
    },
    {
      "path": "registry/blocks/faq-section/faq-section.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/faq-section/faq-section.module.css"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.tsx",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.tsx"
    },
    {
      "path": "registry/components/segmented-control/segmented-control.module.css",
      "type": "registry:component",
      "target": "@components/manicat/segmented-control/segmented-control.module.css"
    },
    {
      "path": "registry/components/search-field/search-field.tsx",
      "type": "registry:component",
      "target": "@components/manicat/search-field/search-field.tsx"
    },
    {
      "path": "registry/components/search-field/search-field.module.css",
      "type": "registry:component",
      "target": "@components/manicat/search-field/search-field.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/faq-section",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/faq-section",
    "markdown": "https://uiarc.dev/components/blocks/faq-section/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx
"use client";

import { FaqSection } from "manicat/registry/blocks/faq-section/faq-section";

export function FaqSectionExample() {
  // Size containers have no width of their own: give the demo the whole row.
  return <div className="w-full"><FaqSection /></div>;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Pricing FAQ Your own questions, one open at a time.

Pricing FAQ Your own questions, one open at a time. preview

Pricing questions

Everything you need to know before you install your first component.

  • Yes. Your plan stays active until the end of the billing period.

Searchable help center A search variant that filters the questions as the visitor types.

Searchable help center A search variant that filters the questions as the visitor types. preview

How can we help?

Everything you need to know before you install your first component.

3 questions

  • Use “Forgot password” on the sign-in page.

Keyboard interactions

KeysAction
ArrowUp / ArrowDownMove between questions in one list.
Home / EndFirst or last question.
Enter / SpaceOpens or closes the focused answer.

Accessibility

  • Questions are buttons with aria-expanded controlling their answer region.
  • Search matches are wrapped in mark elements; closed items that match only in the answer show a short excerpt.
  • The search variant uses Arc SearchField with a real label.

Motion

  • Answers open with height and opacity together and the plus icon turns.
  • Filtering and category changes move remaining items with layout animation.
  • Reduced motion opens and filters instantly.

Responsive behavior

  • Container queries: below 760px the category rail becomes a horizontal scrolling row above the questions; below 480px padding tightens.

Performance

  • Search filters in memory on each keystroke; fine for dozens of items, not thousands.

Notes for AI

  • Keep answers plain text; the search variant matches and highlights inside them.
  • Pass stable ids when questions may be reworded, so controlled open state survives edits.
  • Composes Arc SearchField and SegmentedControl.