diff --git a/packages/ui/src/components/accordion/accordion.module.css b/packages/ui/src/components/accordion/accordion.module.css
index 7f9783d..8933b74 100644
--- a/packages/ui/src/components/accordion/accordion.module.css
+++ b/packages/ui/src/components/accordion/accordion.module.css
@@ -13,6 +13,7 @@
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
+      user-select: none;
     }
 
     .inner-content {
diff --git a/packages/website/docs/authored/ui/accordion/accordion-docs.tsx b/packages/website/docs/authored/ui/accordion/accordion-docs.tsx
new file mode 100644
index 0000000..52860e6
--- /dev/null
+++ b/packages/website/docs/authored/ui/accordion/accordion-docs.tsx
@@ -0,0 +1,12 @@
+import { ComponentPage } from '@site/src/components/component-utils/component-page/component-page';
+import exampleCode from '!!raw-loader!@site/docs/code-examples/accordion.example.tsx';
+
+export function AccordionDocs() {
+  return (
+    <ComponentPage
+      cssPaths={['components/accordion/accordion.module.css']}
+      componentPath="components/accordion/accordion.tsx"
+      exampleCode={exampleCode}
+    />
+  );
+}
diff --git a/packages/website/docs/authored/ui/accordion/accordion.mdx b/packages/website/docs/authored/ui/accordion/accordion.mdx
new file mode 100644
index 0000000..4fb7c3e
--- /dev/null
+++ b/packages/website/docs/authored/ui/accordion/accordion.mdx
@@ -0,0 +1,8 @@
+---
+title: Accordion
+description: Accordion component
+---
+
+import { AccordionDocs } from "./accordion-docs.tsx"
+
+<AccordionDocs />
\ No newline at end of file
diff --git a/packages/website/docs/code-examples/accordion.example.tsx b/packages/website/docs/code-examples/accordion.example.tsx
new file mode 100644
index 0000000..4b1e915
--- /dev/null
+++ b/packages/website/docs/code-examples/accordion.example.tsx
@@ -0,0 +1,33 @@
+function AccordionExample() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+        width: '100%',
+      }}
+    >
+      <Accordion label="Default Open Accordion" defaultOpen>
+        <p>
+          This accordion is open by default. Click the header to collapse it.
+        </p>
+      </Accordion>
+      <Accordion label="Initially Closed Accordion" defaultOpen={false}>
+        <p>This accordion starts closed. Click the header to expand it.</p>
+      </Accordion>
+      <Accordion label="Accordion with Rich Content" defaultOpen={false}>
+        <div
+          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
+        >
+          <p>Accordions can contain any content, including nested elements.</p>
+          <ul>
+            <li>Item one</li>
+            <li>Item two</li>
+            <li>Item three</li>
+          </ul>
+        </div>
+      </Accordion>
+    </div>
+  );
+}