diff --git a/platform/ui/src/components/SidePanel/SidePanel.mdx b/platform/ui/src/components/SidePanel/SidePanel.mdx
new file mode 100644
index 000000000..1ab31f5a9
--- /dev/null
+++ b/platform/ui/src/components/SidePanel/SidePanel.mdx
@@ -0,0 +1,39 @@
+---
+name: SidePanel
+menu: General
+route: components/sidePanel
+---
+
+import { Playground, Props } from 'docz';
+import { SidePanel } from '@ohif/ui';
+
+# SidePanel
+
+## Import
+
+```javascript
+import { SidePanel } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" style={{height: '500px'}}>
+    <SidePanel
+      side="left"
+      iconName="icon-nav-studies"
+      iconLabel="Studies"
+      componentLabel="Studies"
+      defaultIsOpen={false}
+    >
+      <div className="flex justify-center text-white p-2">panel content</div>
+    </SidePanel>
+    <div className="flex flex-1 h-100 overflow-hidden w-100 bg-primary-main items-center justify-center text-white">
+      CONTENT
+    </div>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={SidePanel} />