{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grouped-faq-section",
  "type": "registry:ui",
  "title": "Grouped FAQ Section",
  "description": "FAQ block organized into named categories. Items collapse with a thin bottom border when closed; on open they lift to a card-style state with ring, shadow, and rounded corners.",
  "dependencies": [],
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/grouped-faq-section.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════════════════\n   Grouped FAQ Section — A FAQ block organized into named\n   categories. Each item collapses with a thin bottom border\n   when closed; on open it lifts to a card-style state with\n   ring, shadow, rounded corners, and tinted background.\n\n   Typical use: marketing pages where FAQs span multiple\n   topics (e.g., Installation, Pricing, Support). Each group\n   gets its own subheading and accordion stack.\n   ═══════════════════════════════════════════════════════════ */\n\nexport interface GroupedFAQItem {\n  question: string;\n  answer: string;\n}\n\nexport interface GroupedFAQGroup {\n  title: string;\n  items: GroupedFAQItem[];\n}\n\nexport interface GroupedFAQSectionProps {\n  title?: string;\n  description?: string;\n  groups?: GroupedFAQGroup[];\n  /** Text leading into the contact link (e.g., \"Can't find what you're looking for? Contact our\"). */\n  contactPrompt?: string;\n  /** Anchor text for the contact link. */\n  contactCTA?: string;\n  contactHref?: string;\n  className?: string;\n}\n\nconst DEFAULT_GROUPS: GroupedFAQGroup[] = [\n  {\n    title: \"Installation\",\n    items: [\n      {\n        question: \"How do I add a component to my project?\",\n        answer:\n          'Run the shadcn CLI with the component URL — for example: `npx shadcn@latest add \"https://ruixen.com/r/staggered-faq-section\"`. The CLI copies the source file into your project with dependencies resolved.',\n      },\n      {\n        question: \"Do I need to install a package or wrap a provider?\",\n        answer:\n          \"No. Each component is copied directly into your project as source code. There's no npm package, no provider to wrap, and no global CSS to import. The source is yours once you add it.\",\n      },\n      {\n        question: \"Can I use this in an existing shadcn project?\",\n        answer:\n          \"Yes. Ruixen UI components install via the shadcn CLI and use the same `@/components/ui/*` import paths shadcn uses. They drop into existing shadcn projects without conflict.\",\n      },\n    ],\n  },\n  {\n    title: \"Stack Support\",\n    items: [\n      {\n        question: \"Which Tailwind version is supported?\",\n        answer:\n          'Both Tailwind v3 and v4 are first-class targets. Components default to v4. For v3, swap the registry prefix: `npx shadcn@latest add \"https://ruixen.com/r/tw3/<component>\"`. Your selection persists across the docs sidebar.',\n      },\n      {\n        question: \"Can I use Base UI primitives instead of Radix?\",\n        answer:\n          \"Yes. Every component ships in four registry variants — Tailwind v4 + Radix, Tailwind v3 + Radix, Tailwind v4 + Base UI, Tailwind v3 + Base UI — generated from one source codebase at build time. Pick the variant that matches your stack.\",\n      },\n      {\n        question: \"Does it work with Next.js, Vite, Remix, or Astro?\",\n        answer:\n          \"Yes. All major React frameworks are supported. Installation guides are available for Next.js, Vite, Remix, Astro, Laravel, and Gatsby in the docs.\",\n      },\n    ],\n  },\n  {\n    title: \"Pricing & License\",\n    items: [\n      {\n        question: \"Is Ruixen UI free?\",\n        answer:\n          \"Yes. The 240+ open-source components are MIT licensed. Use them in personal, commercial, or client projects without restriction.\",\n      },\n      {\n        question: \"What does Ruixen Pro include?\",\n        answer:\n          \"Pro adds 50+ premium components and full landing-page templates with lifetime updates. One-time purchase — $59, no subscription. Available at pro.ruixen.com.\",\n      },\n      {\n        question: \"Can I use components in commercial projects?\",\n        answer:\n          \"Yes. The free open-source catalog is MIT licensed. Pro components include a commercial license with unlimited projects.\",\n      },\n    ],\n  },\n];\n\nexport default function GroupedFAQSection({\n  title = \"Frequently Asked Questions\",\n  description = \"Discover quick and comprehensive answers to common questions about installation, stack support, and licensing.\",\n  groups = DEFAULT_GROUPS,\n  contactPrompt = \"Can't find what you're looking for? Contact our\",\n  contactCTA = \"support team\",\n  contactHref = \"#\",\n  className,\n}: GroupedFAQSectionProps) {\n  return (\n    <section className={cn(\"py-16 md:py-24\", className)}>\n      <div className=\"mx-auto max-w-3xl px-1 md:px-6\">\n        <div className=\"max-w-lg max-md:px-6\">\n          <h2 className=\"text-foreground text-4xl font-semibold\">{title}</h2>\n          <p className=\"text-muted-foreground mt-4 text-balance text-lg\">\n            {description}\n          </p>\n        </div>\n\n        <div className=\"my-12 space-y-12 md:-ml-6\">\n          {groups.map((group) => (\n            <div key={group.title} className=\"space-y-4\">\n              <h3 className=\"text-foreground pl-6 text-lg font-semibold\">\n                {group.title}\n              </h3>\n              <Accordion type=\"single\" collapsible className=\"-space-y-1\">\n                {group.items.map((item, idx) => (\n                  <AccordionItem\n                    key={idx}\n                    value={`${group.title}-${idx}`}\n                    className=\"peer rounded-xl border-none px-6 py-1 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm data-[state=open]:shadow-black/[0.065] data-[state=open]:ring-1 data-[state=open]:ring-border\"\n                  >\n                    <AccordionTrigger className=\"cursor-pointer rounded-none border-b text-base transition-none hover:no-underline data-[state=open]:border-transparent\">\n                      {item.question}\n                    </AccordionTrigger>\n                    <AccordionContent className=\"text-muted-foreground pt-2 text-sm leading-relaxed\">\n                      {item.answer}\n                    </AccordionContent>\n                  </AccordionItem>\n                ))}\n              </Accordion>\n            </div>\n          ))}\n        </div>\n\n        <p className=\"text-muted-foreground max-md:px-6\">\n          {contactPrompt}{\" \"}\n          <a\n            className=\"text-primary font-medium hover:underline\"\n            href={contactHref}\n          >\n            {contactCTA}\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/grouped-faq-section.tsx"
    }
  ]
}