diff --git a/packages/design-system/src/accordion.tsx b/packages/design-system/src/accordion.tsx
new file mode 100644
index 00000000..ddf913e8
--- /dev/null
+++ b/packages/design-system/src/accordion.tsx
@@ -0,0 +1,44 @@
+import React, { forwardRef, ElementRef, ComponentPropsWithoutRef } from "react";
+import {
+  CloseButton,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+const Accordion = forwardRef<
+  ElementRef<typeof Disclosure>,
+  ComponentPropsWithoutRef<typeof Disclosure>
+>(({ className, ...props }, ref) => (
+  <div className={twMerge("k1-border-b", className)}>
+    <Disclosure ref={ref} {...props} />
+  </div>
+));
+Accordion.displayName = "Accordion";
+
+const AccordionButton = forwardRef<
+  ElementRef<typeof DisclosureButton>,
+  ComponentPropsWithoutRef<typeof DisclosureButton>
+>(({ className, ...props }, ref) => (
+  <DisclosureButton ref={ref} className={(twMerge(""), className)} {...props} />
+));
+AccordionButton.displayName = "AccordionButton";
+
+const AccordionPanel = forwardRef<
+  ElementRef<typeof DisclosurePanel>,
+  ComponentPropsWithoutRef<typeof DisclosurePanel>
+>(({ className, ...props }, ref) => (
+  <DisclosurePanel ref={ref} className={(twMerge(""), className)} {...props} />
+));
+AccordionButton.displayName = "AccordionPanel";
+
+const AccordionCloseButton = forwardRef<
+  ElementRef<typeof CloseButton>,
+  ComponentPropsWithoutRef<typeof CloseButton>
+>(({ className, ...props }, ref) => (
+  <CloseButton ref={ref} className={(twMerge(""), className)} {...props} />
+));
+AccordionCloseButton.displayName = "AccordionCloseButton";
+
+export { Accordion, AccordionButton, AccordionPanel, AccordionCloseButton };