{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "faq-02",
  "title": "FAQ 02",
  "description": "Two-column accordion FAQ grid for displaying a larger set of questions side by side. Use it when you have ten or more questions and want to keep the FAQ section compact and well-organized.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "src/registry/blocks/faq-02/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 Faq02Props {\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.\",\n  },\n  {\n    title: \"Is it free to use?\",\n    description:\n      \"Yes, all components are free and open source for personal and commercial use.\",\n  },\n  {\n    title: \"Can I customize the components?\",\n    description:\n      \"Absolutely! You own the code and can customize every aspect to match your brand.\",\n  },\n  {\n    title: \"What dependencies are required?\",\n    description:\n      \"Components are built on shadcn/ui and Tailwind CSS with some Radix UI primitives.\",\n  },\n  {\n    title: \"How do I get started?\",\n    description:\n      \"Browse the components, copy the code, and paste it into your project. No setup required.\",\n  },\n  {\n    title: \"Is TypeScript supported?\",\n    description:\n      \"Yes, all components are written in TypeScript with full type safety.\",\n  },\n];\n\nconst Faq02 = ({\n  label = \"FAQ\",\n  title = \"Common Questions\",\n  description,\n  items = defaultItems,\n  className,\n}: Faq02Props) => (\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 type=\"multiple\" className=\"mt-12 grid gap-4 md:grid-cols-2\">\n      {items.map((item, index) => (\n        <AccordionItem\n          key={index}\n          value={`item-${index}`}\n          className=\"relative h-fit 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 Faq02;\n",
      "type": "registry:component",
      "target": "components/faq-02.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/faq-02.webp",
    "imageDark": "/r/previews/faq-02-dark.webp",
    "prose": {
      "about": "FAQ 02 is a two-column accordion grid that displays questions and answers side by side, doubling the content density of FAQ 01. Built with shadcn/ui Accordion and Tailwind CSS grid, it collapses to a single column on mobile while maintaining the two-column layout on desktop. Like FAQ 01, it accepts a flat array of question/answer objects and operates one-open-at-a-time by default.",
      "whenToUse": [
        "Pages with 8 or more FAQ items where a single-column layout would make the section uncomfortably long",
        "Dedicated FAQ pages where content density is the goal and users are actively looking for answers",
        "Pricing pages on wider layouts where a full-width single column leaves too much whitespace",
        "Products with two distinct user segments that each have their own set of questions"
      ],
      "notes": "On mobile this renders as a single column, identical to FAQ 01. If your primary audience is mobile users, FAQ 01 may be a better choice to avoid the two-column layout feeling cramped on small screens."
    }
  },
  "categories": [
    "faq"
  ],
  "type": "registry:block"
}