FAQ List

Component 3

About

A stacked list of FAQ question rows where each answer expands and collapses with an animated chevron.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FAQ List to your project and fits it to your theme.

Code

How FAQ List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible-02-utils/collapsible";
import { ChevronDownIcon } from "lucide-react";

const faqs = [
  {
    q: "Can I cancel my subscription anytime?",
    a: "Yes. Your plan stays active until the end of the current billing period, and you keep full access until then.",
  },
  {
    q: "Do you offer refunds?",
    a: "We refund unused time on annual plans within 30 days of purchase. Monthly plans are non-refundable.",
  },
  {
    q: "Can I switch plans later?",
    a: "Absolutely — upgrade or downgrade at any time. Changes are prorated against your next invoice.",
  },
];

export default function Default() {
  return (
    <div className="flex min-h-64 w-full items-center justify-center p-8">
      <div className="w-full max-w-md divide-y rounded-lg border">
        {faqs.map((faq, i) => (
          <Collapsible key={faq.q} className="px-4" defaultOpen={i === 0}>
            <CollapsibleTrigger className="group flex w-full items-center justify-between gap-4 py-4 text-left text-sm font-medium">
              {faq.q}
              <ChevronDownIcon className="text-muted-foreground size-4 shrink-0 transition-transform group-data-panel-open:rotate-180" />
            </CollapsibleTrigger>
            <CollapsibleContent>
              <p className="text-muted-foreground pb-4 text-sm leading-relaxed">
                {faq.a}
              </p>
            </CollapsibleContent>
          </Collapsible>
        ))}
      </div>
    </div>
  );
}