{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"components-accordions-glow-border-accordion","type":"registry:block","title":"Glow Border Accordion","files":[{"path":"components/blocks/components/accordions/glow-border-accordion.tsx","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function GlowBorderAccordion() {\n  return (\n    <div className=\"max-w-md mx-auto py-6\">\n      <Accordion type=\"single\" collapsible className=\"w-full\">\n        <AccordionItem\n          value=\"item-1\"\n          className=\"border-b-0 mb-4 rounded-md overflow-hidden shadow-sm data-[state=open]:shadow-[0_0_10px_rgba(0,0,0,0.1)] transition-shadow duration-300\"\n        >\n          <AccordionTrigger className=\"hover:no-underline px-4 py-3 data-[state=open]:bg-muted/30 transition-colors rounded-t-md\">\n            Is it accessible?\n          </AccordionTrigger>\n          <AccordionContent className=\"border-t px-4 pt-4\">\n            Yes. It adheres to the WAI-ARIA design pattern.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem\n          value=\"item-2\"\n          className=\"border-b-0 mb-4 rounded-md overflow-hidden shadow-sm data-[state=open]:shadow-[0_0_10px_rgba(0,0,0,0.1)] transition-shadow duration-300\"\n        >\n          <AccordionTrigger className=\"hover:no-underline px-4 py-3 data-[state=open]:bg-muted/30 transition-colors rounded-t-md\">\n            Is it styled?\n          </AccordionTrigger>\n          <AccordionContent className=\"border-t px-4 pt-4\">\n            Yes. It comes with default styles that matches the other\n            components&apos; aesthetic.\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem\n          value=\"item-3\"\n          className=\"border-b-0 mb-4 rounded-md overflow-hidden shadow-sm data-[state=open]:shadow-[0_0_10px_rgba(0,0,0,0.1)] transition-shadow duration-300\"\n        >\n          <AccordionTrigger className=\"hover:no-underline px-4 py-3 data-[state=open]:bg-muted/30 transition-colors rounded-t-md\">\n            Is it animated?\n          </AccordionTrigger>\n          <AccordionContent className=\"border-t px-4 pt-4\">\n            Yes. It&apos;s animated by default, but you can disable it if you\n            prefer.\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/components/accordions/glow-border-accordion.tsx"},{"path":"components/ui/accordion.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","type":"registry:ui","target":"components/ui/accordion.tsx"}],"description":"An accordion with a glowing border on the open item. The lit edge draws the eye to the active panel, fitting dark themes and modern product FAQs.","dependencies":["lucide-react","radix-ui"]}