FAQ Simple

BlockMantine ≥ 9MantineProvider

Centered FAQ section with a separated accordion of consumer-supplied question/answer pairs.

Install

One command copies the item's source into your project, where you own and edit it.

npx manteen add @house/faq-simple

Dependencies

• @mantine/core@^9npm

Installing this item also installs @house/mantine-ui-license from the registry.

Preview

Usage

A copy-ready example published by the registry author. Imports use the aliases Manteen configures at init.

faq-simple.usage.tsx

import { FaqSimple, type FaqSimpleItem } from "@/components/ui/faq-simple";

const items: FaqSimpleItem[] = [
  {
    question: "How can I reset my password?",
    answer:
      'Open Settings > Security and select "Reset password." We\'ll send a reset link to your account email; it expires after 30 minutes.',
  },
  {
    question: "Can I create more than one account?",
    answer:
      "Each workspace supports multiple accounts under one billing plan. Invite teammates from Settings > Members.",
  },
  {
    question: "How do I subscribe to the monthly newsletter?",
    answer:
      "Enable it from Settings > Notifications > Newsletter. You can unsubscribe from the same page at any time.",
  },
  {
    question: "Do you store credit card information securely?",
    answer:
      "Card details are handled entirely by our PCI-compliant payment processor; we never see or store raw card numbers.",
  },
  {
    question: "What payment systems do you work with?",
    answer:
      "We accept all major credit cards, plus ACH transfer and wire payment for annual plans.",
  },
];

export function SupportFaq() {
  return <FaqSimple title="Frequently Asked Questions" items={items} />;
}

Props

Author-documented props, carried verbatim from the registry item.

Prop	Type	Default	Description
title	ReactNode	"Frequently Asked Questions"	Section heading text.
titleOrder	TitleOrder	2	Heading level for title. Upstream leaves Title at Mantine's own default of 1; this port defaults to 2 so dropping the section into a page that already has an h1 doesn't produce two.
items*	FaqSimpleItem[]	—	The question/answer list; FaqSimpleItem is { question: string; answer: ReactNode; value?: string }, value is the Accordion item id and defaults to faq-${index} when omitted.
variant	AccordionProps["variant"]	"separated"	Accordion visual variant; upstream's hardcoded value.
chevronPosition	AccordionProps["chevronPosition"]	—	Which side the expand chevron renders on; upstream never set this explicitly.
controlOrder	AccordionProps["order"]	—	Heading level (2-6) each Accordion.Control renders inside; defaults to one level below titleOrder. Upstream never set Accordion's order, leaving controls as bare buttons outside the page heading outline — this fixes that.
defaultValue	string	—	Value of the item open on mount; nothing is open by default, matching upstream.

* required

Styling

No public Styles API is declared. Installed CSS remains editable because your project owns the source; internal class names are implementation details, not a customization contract.

Source

2 installable files ship with this item.

registry/mantine-ui/faq-simple/faq-simple.tsxcomponent · 2.7 kB · tsx

/**
 * Adapted from Mantine UI's FaqSimple at
 * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see
 * LICENSES/MANTINE-UI.txt after installation.
 */

import { Accordion, type AccordionProps, Container, Title, type TitleOrder } from "@mantine/core";
import type { ReactNode } from "react";

import classes from "./faq-simple.module.css";

export interface FaqSimpleItem {
  question: string;
  answer: ReactNode;
  /** Accordion item value; derived from the item's index when omitted. */
  value?: string;
}

export interface FaqSimpleProps {
  title?: ReactNode;
  /**
   * Heading level for `title`. Upstream leaves this at Mantine's `Title`
   * default (1); a dropped-in section defaulting to another page-level `h1`
   * is a heading-hierarchy bug, so this port defaults to 2 instead and
   * exposes the level as a real choice.
   */
  titleOrder?: TitleOrder;
  items: FaqSimpleItem[];
  /** Accordion item border/background treatment. Upstream always used "separated". */
  variant?: AccordionProps["variant"];
  /** Which side the expand chevron renders on. */
  chevronPosition?: AccordionProps["chevronPosition"];
  /**
   * Heading level (2-6) each `Accordion.Control` renders inside. Upstream
   * leaves Accordion's `order` unset, so its controls are bare buttons with
   * no place in the page's heading outline; Mantine's own docs recommend
   * setting it to meet WAI-ARIA accessibility requirements. Defaults one
   * level below `titleOrder`.
   */
  controlOrder?: AccordionProps["order"];
  /** Value of the item that starts expanded; nothing is expanded by default. */
  defaultValue?: string;
}

export function FaqSimple({
  title = "Frequently Asked Questions",
  titleOrder = 2,
  items,
  variant = "separated",
  chevronPosition,
  controlOrder,
  defaultValue,
}: FaqSimpleProps) {
  const resolvedControlOrder =
    controlOrder ?? (Math.min(Math.max(titleOrder + 1, 2), 6) as AccordionProps["order"]);

  return (
    <Container size="sm" className={classes.wrapper}>
      <Title ta="center" order={titleOrder} className={classes.title}>
        {title}
      </Title>

      <Accordion
        variant={variant}
        chevronPosition={chevronPosition}
        order={resolvedControlOrder}
        defaultValue={defaultValue}
      >
        {items.map((item, index) => (
          <Accordion.Item
            className={classes.item}
            value={item.value ?? `faq-${index}`}
            key={item.value ?? `faq-${index}`}
          >
            <Accordion.Control>{item.question}</Accordion.Control>
            <Accordion.Panel>{item.answer}</Accordion.Panel>
          </Accordion.Item>
        ))}
      </Accordion>
    </Container>
  );
}

registry/mantine-ui/faq-simple/faq-simple.module.cssstyle · 535 B · css

/*
 * Adapted from Mantine UI's FaqSimple at
 * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see
 * LICENSES/MANTINE-UI.txt after installation.
 */
.wrapper {
  padding-top: calc(var(--mantine-spacing-xl) * 2);
  padding-bottom: calc(var(--mantine-spacing-xl) * 2);
}

.title {
  margin-bottom: calc(var(--mantine-spacing-xl) * 1.5);
}

.item {
  border-radius: var(--mantine-radius-md);
  margin-bottom: var(--mantine-spacing-lg);
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

Author notes

Adapted from Mantine UI FaqSimple at ffbf61c559…; the hardcoded title and Q&A list became props, variant became configurable, and two heading-hierarchy bugs were fixed — Title's implicit h1 (now titleOrder, default 2) and Accordion controls rendering as bare buttons with no place in the page's heading outline (now controlOrder).