Faq Block

The FAQ Block is a composable section that renders a heading, rich text body, and a list of expandable question/answer items. It is built on top of the Accordion and RichText components.

npx shadcn@latest add @rokkit200-ui/faq-block

Preview

Faq Block Heading

Faq Block Main Body

Faq Item Block 1

Faq Item Block 2

Code

import mockedFaqBlock from "@/data/mock/optimizely/faq/faq-block.json";
import { FaqBlock } from "@/registry/rokkit200-ui/blocks/faq-block/faq-block";
import { faqCmsMappers } from "@/registry/rokkit200-ui/blocks/faq-block/internals/lib/faq-utils";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { faqBlockCodeModel, faqBlockFragment } from "./constants";

export default function FaqBlockDefaultDemo() {
    const properties = mapCmsType(
        faqCmsMappers,
        mockedFaqBlock.data.FaqBlock.item
    );

    return <FaqBlock {...properties!} />;
}

Code Model

WIP

GraphQL Query

query FaqBlockQuery {
    FaqBlock {
      item {
        ...FaqBlockFragment
      }
    }
  }

  fragment FaqBlockFragment on FaqBlock {
    Heading
    MainBody {
      json
    }
    Items {
      Heading
      MainBody {
        json
      }
    }
  }

Composition

The FAQ Block composes the following components:

Component	Role
RichText	Renders the block body and each FAQ item answer
Accordion	Renders the expandable question/answer list

Usage

Below is an example of how to use the FaqBlock in your site.

import { FaqBlock } from "@/rokkit200-ui/blocks/faq-block/faq-block";
import { mapCmsType } from "@/rokkit200-ui/lib/content-mapper/content-mapper-util";
import { faqCmsMappers } from "@/rokkit200-ui/blocks/faq-block/internals/lib/faq-utils";

const properties = mapCmsType(faqCmsMappers, faqResponse);

return <FaqBlock {...properties!} />;

Customisation

Compact layout

Use className overrides to constrain width and reduce text size for a compact FAQ presentation.

Preview

Faq Block Heading

Faq Block Main Body

Faq Item Block 1

Faq Item Block 2

Code

import mockedFaqBlock from "@/data/mock/optimizely/faq/faq-block.json";
import { FaqBlock } from "@/registry/rokkit200-ui/blocks/faq-block/faq-block";
import { faqCmsMappers } from "@/registry/rokkit200-ui/blocks/faq-block/internals/lib/faq-utils";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function FaqBlockCompactDemo() {
    const properties = mapCmsType(
        faqCmsMappers,
        mockedFaqBlock.data.FaqBlock.item
    );

    return (
        <FaqBlock
            {...properties!}
            className="mx-auto max-w-2xl"
            headingClassName="text-2xl"
            bodyClassName="text-sm"
            accordionClassName="text-sm"
        />
    );
}

Custom styling

Use the className, headingClassName, bodyClassName, and accordionClassName props to customise the appearance.

Preview

Faq Block Heading

Faq Block Main Body

Faq Item Block 1

Faq Item Block 2

Code

import mockedFaqBlock from "@/data/mock/optimizely/faq/faq-block.json";
import { FaqBlock } from "@/registry/rokkit200-ui/blocks/faq-block/faq-block";
import { faqCmsMappers } from "@/registry/rokkit200-ui/blocks/faq-block/internals/lib/faq-utils";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function FaqBlockCustomStyledDemo() {
    const properties = mapCmsType(
        faqCmsMappers,
        mockedFaqBlock.data.FaqBlock.item
    );

    return (
        <FaqBlock
            {...properties!}
            className="rounded-xl border border-zinc-300 p-6 dark:border-zinc-600"
            headingClassName="text-3xl text-blue-600 dark:text-blue-400"
            bodyClassName="italic text-zinc-500 dark:text-zinc-400"
            accordionClassName="rounded-lg"
        />
    );
}

API Reference

Prop	Type	Default	Description
heading	string	—	The FAQ section heading
mainBody	RichTextNode[] | undefined	—	Rich text content rendered below the heading
items	FaqItemProperties[]	—	Array of FAQ items with id, heading, and mainBody
className	string	—	Class name for the root <section> element
headingClassName	string	—	Class name for the <h2> heading
bodyClassName	string	—	Class name for the body <RichText>
accordionClassName	string	—	Class name for the <Accordion> wrapper

Accessibility

• The root element is a <section> with aria-labelledby referencing the heading.
• Each FAQ item is rendered as an accordion panel with proper ARIA attributes, keyboard navigation, and focus management provided by Base UI.
• The heading is rendered as an <h2> element.

Related patterns

• Grouped Content — for organising related content sections