feat: Add Accordion component with expandable panels (#176)

* t rebase --continue
Enhanced:redesign the component

* DarkMode Toggle

* File Upload Drag And Drop

* Add PR build status workflow

* Add PR build status workflow_2

* Add PR build status workflow_3

* Add PR build status workflow_4

* Add PR build status workflow_5

* Add PR build status workflow_5

* Adding the Accordian Component

* Finalizing changes

Author: Deepanshu1230

src/components/ComponentCard.tsx

@@ -225,10 +225,12 @@ export const ComponentCard = ({
                 </TabsContent>
 
                 <TabsContent value="code" className="p-4 sm:p-5 lg:p-6">
-                    <CodeBlock code={code} componentName={title} />
-                    {loading ? <Skeleton width="100%" height="200px" /> : <CodeBlock code={code} />}
-                    {loading ? <Skeleton width="100%" height="200px" className={isDark ? 'bg-zinc-700' : 'bg-zinc-200'} /> : <CodeBlock code={code} />}
-                </TabsContent>
+    {loading ? (
+        <Skeleton width="100%" height="200px" className={isDark ? 'bg-zinc-700' : 'bg-zinc-200'} />
+    ) : (
+        <CodeBlock code={code} componentName={title} />
+    )}
+</TabsContent>
             </Tabs>
         </Card>
     );

src/components/ui/Accordion.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+interface AccordionItemProps {
+  title: string;
+  content: string;
+  isOpen: boolean;
+  onClick: () => void;
+}
+
+const AccordionItem = ({ title, content, isOpen, onClick }: AccordionItemProps) => {
+  return (
+    <div className="border-b bg-black dark:bg-white border-gray-100 last:border-none">
+      <button
+        onClick={onClick}
+        className="flex w-full items-center justify-between py-3 px-4 text-left text-sm font-medium  text-white dark:text-gray-700  transition-colors rounded-xl"
+      >
+        <span>{title}</span>
+        <ChevronDown
+          className={`h-4 w-4 text-gray-400  transition-transform duration-200 ${
+            isOpen ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+      <div
+        className={`transition-all duration-300 ease-in-out overflow-hidden ${
+          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-4 pb-3 dark:text-gray-600 text-gray-200 text-sm leading-relaxed">
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Accordion = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  const items = [
+    {
+      title: "✨ What is DevUI?",
+      content:
+        "DevUI is a modern, open-source component library to build beautiful apps faster.",
+    },
+    {
+      title: "🤝 Can I contribute?",
+      content:
+        "Yes! Fork our GitHub repo, submit your PR, and join our awesome community.",
+    },
+    {
+      title: "💜 Is it free?",
+      content:
+        "Absolutely! DevUI is free under the MIT license. Use it anywhere without limits.",
+    },
+  ];
+
+  return (
+    <div className="w-full max-w-lg mx-auto p-6">
+      <div className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
+        {items.map((item, i) => (
+          <AccordionItem
+            key={i}
+            {...item}
+            isOpen={openIndex === i}
+            onClick={() => setOpenIndex(openIndex === i ? null : i)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-shadow transition-colors duration-300 hover:shadow-md hover:border-primary/30",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-shadow  duration-300 hover:shadow-md hover:border-primary/30",
         className
       )}
       {...props}

src/data/components.tsx

@@ -59,10 +59,12 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/components/ui/drawer";
+
 import { FileUpload } from "@/components/ui/file-upload";
 // REMOVED: import React, { useState } from "react";
 // ADDED: Import the component that now correctly encapsulates useState:
 import { SliderDemo } from "@/components/ui/sliderDemo";
+import Accordion from "@/components/ui/Accordion";
 
 export const componentsData = [
   {
@@ -1078,4 +1080,34 @@ export function SonnerDemo() {
   )
 }`,
   },
+  {
+  id: "accordion",
+  title: "Accordion",
+  description: "A vertically stacked set of expandable panels that reveal hidden content.",
+  category: "Display",
+  preview: <Accordion/>,
+  code: `import Accordion from "@/components/ui/Accordion"
+
+import Accordion from "@/components/ui/Accordion"
+
+export function AccordionDemo() {
+  const items = [
+    {
+      title: "✨ What is DevUI?",
+      content: "DevUI is a modern, open-source component library to build beautiful apps faster."
+    },
+    {
+      title: "🤝 Can I contribute?",
+      content: "Yes! Fork our GitHub repo, submit your PR, and join our awesome community."
+    },
+    {
+      title: "💜 Is it free?",
+      content: "Absolutely! DevUI is free under the MIT license. Use it anywhere without limits."
+    }
+  ]
+
+  return <Accordion items={items} />
+}`,
+},
+
 ];