// @name: FAQ Categorised Tabs // @dependencies: lucide-react import { useState } from "react"; import { ChevronRight } from "lucide-react"; const CATEGORIES = ["Billing", "Account", "Shipping"]; const ITEMS = [ { cat: "Billing", q: "When am I charged?", a: "On the same date each month, starting the day your trial ends." }, { cat: "Billing", q: "Can I get an invoice?", a: "Every payment generates a PDF invoice, available under Billing → History." }, { cat: "Billing", q: "Do you take purchase orders?", a: "On annual plans above $5,000 we do. Ask sales for a quote and we will raise one." }, { cat: "Account", q: "How do I add a teammate?", a: "Settings → Members → Invite. They receive an email and join with the role you pick." }, { cat: "Account", q: "Can I transfer ownership?", a: "Yes. The current owner can hand the workspace to any admin from Settings → General." }, { cat: "Shipping", q: "Do you ship internationally?", a: "To 42 countries. Duties are calculated at checkout so nothing is owed on delivery." }, { cat: "Shipping", q: "Can I change my address?", a: "Until the order is picked, which is usually a two-hour window after you order." }, ]; export default function FaqCategorisedTabs() { const [active, setActive] = useState("Billing"); const [open, setOpen] = useState(null); const visible = ITEMS.filter((item) => item.cat === active); return (

Help centre

{CATEGORIES.map((cat) => ( ))}

{open === item.q && (
{item.a}
)}

); }

More faq sections

FAQ Accordion Simple

FAQ Two Column

FAQ Split Contact