{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-01",
  "title": "FAQ 01",
  "description": "Single-column accordion FAQ section with expandable question and answer items. Use it on landing pages, pricing pages, or support sections to address common objections and reduce incoming support requests.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "src/registry/blocks/faq-01/faq.tsx",
      "content": "\"use client\";\n\nimport { Plus, X } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\ninterface FaqItem {\n  title: string;\n  description: string;\n}\n\ninterface Faq01Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  items?: FaqItem[];\n  className?: string;\n}\n\nconst defaultItems: FaqItem[] = [\n  {\n    title: \"What is this component library?\",\n    description:\n      \"A collection of production-ready UI blocks built with shadcn/ui and Tailwind CSS. Copy, paste, and customize to build faster.\",\n  },\n  {\n    title: \"Is it free to use?\",\n    description:\n      \"Yes, all components are free and open source. Use them in personal and commercial projects without restrictions.\",\n  },\n  {\n    title: \"Can I customize the components?\",\n    description:\n      \"Absolutely! Since you own the code, you can customize every aspect. Change colors, sizes, animations, and more to match your brand.\",\n  },\n  {\n    title: \"What dependencies are required?\",\n    description:\n      \"Components are built on shadcn/ui and Tailwind CSS. Some components may require additional dependencies like Radix UI primitives.\",\n  },\n];\n\nconst Faq01 = ({\n  label = \"FAQ\",\n  title = \"Common Questions\",\n  description,\n  items = defaultItems,\n  className,\n}: Faq01Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"flex flex-col items-center gap-4 text-center\">\n      {label && (\n        <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n          {label}\n        </p>\n      )}\n      <h2 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl\">\n        {title}\n      </h2>\n      {description && (\n        <p className=\"max-w-xl text-muted-foreground md:text-lg\">\n          {description}\n        </p>\n      )}\n    </div>\n    <Accordion\n      type=\"single\"\n      collapsible\n      className=\"mx-auto mt-12 flex max-w-5xl flex-col gap-4\"\n    >\n      {items.map((item, index) => (\n        <AccordionItem\n          key={index}\n          value={`item-${index}`}\n          className=\"relative rounded-md border-0 bg-muted/50 px-6 data-[state=open]:bg-muted\"\n        >\n          <AccordionTrigger className=\"group flex items-center justify-between gap-4 py-5 text-left text-lg font-medium hover:no-underline\">\n            {item.title}\n            <span className=\"absolute right-4 z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-background shadow-sm\">\n              <Plus className=\"size-4 text-muted-foreground group-data-[state=open]:hidden\" />\n              <X className=\"hidden size-4 text-muted-foreground group-data-[state=open]:block\" />\n            </span>\n          </AccordionTrigger>\n          <AccordionContent className=\"pb-5 text-base text-muted-foreground\">\n            {item.description}\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  </section>\n);\n\nexport default Faq01;\n",
      "type": "registry:component",
      "target": "components/faq-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/faq-01.webp",
    "imageDark": "/r/previews/faq-01-dark.webp",
    "prose": {
      "about": "FAQ 01 is a single-column accordion section built with the shadcn/ui Accordion component. Each item displays a question as the trigger and expands to reveal the answer on click. Only one item is open at a time by default. The section accepts an array of question/answer objects, making it easy to add, remove, or reorder items without editing the component structure. It renders correctly in both light and dark mode.",
      "whenToUse": [
        "Pricing pages where addressing objections close to the CTA reduces drop-off",
        "Landing pages that receive recurring pre-sales questions that slow the sales cycle",
        "Support or help pages where a searchable FAQ is overkill but structured Q&A is needed",
        "Any section where you want to add content density without increasing visual noise"
      ],
      "notes": "FAQPage structured data (JSON-LD) is already implemented on the homepage and blog. Consider adding FAQPage schema to individual pages that use this component to maximize Google rich result eligibility.",
      "faqs": [
        {
          "question": "Can more than one accordion item be open at the same time?",
          "answer": "By default only one item is open at a time. This is the standard shadcn/ui Accordion behavior and can be changed to allow multiple open items if needed."
        },
        {
          "question": "Does this block add FAQPage schema automatically?",
          "answer": "No. The component only renders the UI. Pair it with the FaqJsonLd component on the page it's used on to get FAQPage structured data."
        },
        {
          "question": "How many questions can the block handle?",
          "answer": "Any number — questions and answers are passed as an array prop, so adding, removing, or reordering items doesn't require editing the component."
        }
      ]
    }
  },
  "categories": [
    "faq"
  ],
  "type": "registry:block"
}