Group Accordion

import {
  GroupAccordion,
  GroupAccordionContent,
  GroupAccordionItem,
  GroupAccordionTrigger,
} from "@/components/animations/group-accordion";
import {
  BlushBrush02Icon,
  Idea01Icon,
  LibraryIcon,
  ResizeFieldRectangleIcon,
  WorkIcon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
 
const Demo = () => {
  return (
    <div className="size-full flex items-center justify-center md:p-10 p-4 bg-muted/50">
      <GroupAccordion className="w-full max-w-md" rounded clickOutsideClose>
        {items.map((item) => (
          <GroupAccordionItem key={item.value} value={item.value}>
            <GroupAccordionTrigger>
              <span className="flex items-center gap-2">
                <HugeiconsIcon icon={item.icon} className="size-4" />
                {item.trigger}
              </span>
            </GroupAccordionTrigger>
            <GroupAccordionContent>{item.content}</GroupAccordionContent>
          </GroupAccordionItem>
        ))}
      </GroupAccordion>
    </div>
  );
};
 
export default Demo;
 
const items = [
  {
    value: "item-1",
    trigger: "What is this component?",
    content:
      "This is a custom group accordion component that separates the active item from the rest of the group with animated spacing. The inactive items maintain a muted background while the active item stands out with a lighter background and shadow.",
    icon: Idea01Icon,
  },
  {
    value: "item-2",
    trigger: "How does the animation work?",
    content:
      "The component uses Framer Motion to smoothly animate the spacing, background color, and content height. When you click an item, it animates away from the group with top and bottom margin changes, creating a visual separation effect.",
    icon: WorkIcon,
  },
  {
    value: "item-3",
    trigger: "Can I customize the styling?",
    content:
      "Absolutely! The component is built with Tailwind CSS and Framer Motion, so you can easily customize colors, spacing, animations, and more by modifying the className and animation properties.",
    icon: BlushBrush02Icon,
  },
  {
    value: "item-4",
    trigger: "What libraries are used?",
    content:
      "This component is built with Radix UI for the accessible accordion primitive, Framer Motion for smooth animations, HugeIcons for icons, and Tailwind CSS for styling. All are industry-standard libraries for modern React applications.",
    icon: LibraryIcon,
  },
  {
    value: "item-5",
    trigger: "Is it mobile responsive?",
    content:
      "Yes! The component is fully responsive and works great on all screen sizes. The animations are smooth on both desktop and mobile devices, and the spacing adjusts appropriately for smaller screens.",
    icon: ResizeFieldRectangleIcon,
  },
];
 

import {
  GroupAccordion,
  GroupAccordionContent,
  GroupAccordionItem,
  GroupAccordionTrigger,
} from "@/components/ui/group-accordion";

<GroupAccordion>
  <GroupAccordionItem value="item-1">
    <GroupAccordionTrigger>Item 1</GroupAccordionTrigger>
    <GroupAccordionContent>Item 1 Content</GroupAccordionContent>
  </GroupAccordionItem>
  <GroupAccordionItem value="item-2">
    <GroupAccordionTrigger>Item 2</GroupAccordionTrigger>
    <GroupAccordionContent>Item 2 Content</GroupAccordionContent>
  </GroupAccordionItem>
</GroupAccordion>