FAQ section
FAQ section is a ready-made neobrutalist section (block) from Cruise UI, built from its components. An FAQ section block: heading and intro over the Accordion, an optional "Still have questions?" card (WhatsApp or email) and optional FAQPage JSON-LD for search engines. Install it with npx shadcn@latest add @cruiseui/cruise-faq.
Install
Terminal
npx shadcn@latest add @cruiseui/cruise-faqFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Questions about delivery
Everything you need to know before you order.
Still have questions?
Talk to us. We usually reply within a few hours.
"use client";
import { CruiseFaq } from "@/components/cruise/blocks/faq";
export default function FaqExample() {
return (
<CruiseFaq
title="Questions about delivery"
intro="Everything you need to know before you order."
items={[
{ question: "How long does delivery take?", answer: "Same day in Lagos for orders before 12 noon; 2–3 days elsewhere." },
{ question: "How much is delivery?", answer: "₦1,500 on Lagos Island and ₦2,500 on the Mainland. Free on orders over ₦20,000." },
{ question: "Can I pay on delivery?", answer: "Yes, in Lagos and Abuja. Elsewhere, pay by card or bank transfer." },
]}
contact={{ whatsapp: { phone: "+2348012345678", label: "Chat on WhatsApp" }, email: "hello@example.com" }}
jsonLd
/>
);
}
When to use it
When to use
Answering the questions people ask before they buy or sign up.
When not to
Long help articles (use separate pages) or anything people must read (put it on the page).
Props
CruiseFaq
| Prop | Type | Default | Description |
|---|---|---|---|
title? | ReactNode | "Frequently asked questions" | — |
intro? | ReactNode | "Quick answers to what people ask us most." | — |
items? | CruiseFaqItem[] | DEFAULT_ITEMS | — |
multiple? | boolean | false | Let several answers be open at once. |
contact? | { title?: string | undefined; text?: string | undefined; whatsapp?: { phone: string; message?: string | undefined; label?: string | undefined; } | undefined; email?: string | undefined; emailLabel?: string | undefined; } | — | Adds the "Still have questions?" card. |
jsonLd? | boolean | false | Also output FAQPage structured data. |
headingLevel? | 2 | 3 | 2 | The section heading's level (cards use the next one down). |
className? | string | — | — |
Accessibility
- A <section> labelled by its heading; each question is a real button (Accordion).
- Headings stay in order: set headingLevel to fit the page.
- The structured data mirrors the visible answers.