diff --git a/.changeset/poor-wolves-burn.md b/.changeset/poor-wolves-burn.md
new file mode 100644
index 0000000000..a1e1835da1
--- /dev/null
+++ b/.changeset/poor-wolves-burn.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-website/components-playground': minor
+---
+
+Add a playground example for drawer component to be used for drawer documentation.
diff --git a/website-components-playground/src/application.tsx b/website-components-playground/src/application.tsx
index 96e0063896..0822b148cd 100644
--- a/website-components-playground/src/application.tsx
+++ b/website-components-playground/src/application.tsx
@@ -17,6 +17,8 @@ const FormDetailPage = lazy(() => import('./pages/form-detail-page'));
 const FormMainPage = lazy(() => import('./pages/form-main-page'));
 const FormModalPage = lazy(() => import('./pages/form-modal-page'));
 
+const Drawer = lazy(() => import('./pages/drawer'));
+
 const CustomFormDetailPage = lazy(
   () => import('./pages/custom-form-detail-page')
 );
@@ -79,6 +81,9 @@ const Application = () => (
       <Route path="/tabular-modal-page">
         <TabularModalPage />
       </Route>
+      <Route path="/drawer">
+        <Drawer />
+      </Route>
       <Route>
         <IndexPage />
       </Route>
diff --git a/website-components-playground/src/pages/drawer.tsx b/website-components-playground/src/pages/drawer.tsx
new file mode 100644
index 0000000000..735716e9cc
--- /dev/null
+++ b/website-components-playground/src/pages/drawer.tsx
@@ -0,0 +1,83 @@
+import { Drawer } from '@commercetools-frontend/application-components';
+import Spacings from '@commercetools-uikit/spacings';
+import Text from '@commercetools-uikit/text';
+import ModalController from '../components/modal-controller';
+import PlaygroundController from '../components/playground-controller';
+import LayoutApp from '../layouts/layout-app';
+
+const DrawerExample = () => (
+  <LayoutApp>
+    <PlaygroundController
+      knobs={[
+        {
+          kind: 'text',
+          name: 'title',
+          label: 'Title',
+          initialValue: 'Lorem ipsum',
+        },
+        {
+          kind: 'text',
+          name: 'subtitle',
+          label: 'Subtitle',
+          initialValue: 'Lorem ipsum dolor sit amet',
+        },
+        {
+          kind: 'text-multi',
+          name: 'content',
+          label: 'Content',
+          initialValue: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec turpis in risus elementum fringilla. Vestibulum nec vulputate metus, fringilla luctus nisl. Vestibulum mattis ultricies augue sagittis vestibulum. Nulla facilisi. Quisque tempor pulvinar efficitur. Praesent interdum ultrices leo. Vivamus non ex maximus justo egestas suscipit eget sed purus. Aliquam ut venenatis nulla. Fusce ac ligula viverra, blandit augue eget, congue turpis. Curabitur a sagittis leo. Nunc sed quam dictum, placerat nunc quis, luctus erat.\nNam id orci ut risus accumsan pellentesque. Quisque efficitur eu arcu ut tristique. Praesent ornare varius leo, ut consequat lacus rutrum vel. Donec mollis leo id lectus vehicula tempor. Nulla facilisi. Fusce fringilla tellus ac ligula consequat suscipit. Sed consectetur molestie quam eu pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst.`,
+        },
+        {
+          kind: 'select',
+          name: 'size',
+          label: 'Size',
+          valueOptions: [
+            { value: '10', label: '10' },
+            { value: '20', label: '20' },
+            { value: '30', label: '30' },
+          ],
+          initialValue: '10',
+        },
+        {
+          kind: 'select',
+          name: 'hideControls',
+          label: 'Hide controls',
+          valueOptions: [
+            { value: 'true', label: 'true' },
+            { value: 'false', label: 'false' },
+          ],
+          initialValue: 'false',
+        },
+      ]}
+    >
+      {({ values }) => (
+        <ModalController
+          title="Open the Drawer component by clicking on the button"
+          buttonLabel="Open Drawer"
+        >
+          {({ isOpen, setIsOpen }) => (
+            <Drawer
+              title={values.title as string}
+              subtitle={values.subtitle as string}
+              isOpen={isOpen}
+              size={values.size as 10 | 20 | 30}
+              onClose={() => setIsOpen(false)}
+              hideControls={values.hideControls === 'true'}
+              onPrimaryButtonClick={() => setIsOpen(false)}
+              onSecondaryButtonClick={() => setIsOpen(false)}
+            >
+              <Spacings.Stack scale="m">
+                {(values.content as string).split('\n').map((text, index) => (
+                  <Text.Body key={index}>{text}</Text.Body>
+                ))}
+              </Spacings.Stack>
+            </Drawer>
+          )}
+        </ModalController>
+      )}
+    </PlaygroundController>
+  </LayoutApp>
+);
+DrawerExample.displayName = 'DrawerExample';
+
+export default DrawerExample;
diff --git a/website-components-playground/src/pages/index.tsx b/website-components-playground/src/pages/index.tsx
index 4fccdac2f8..344c7bdb6e 100644
--- a/website-components-playground/src/pages/index.tsx
+++ b/website-components-playground/src/pages/index.tsx
@@ -40,6 +40,9 @@ const Application = () => (
       <li>
         <Link to="/form-detail-page">{'<FormDetailPage>'}</Link>
       </li>
+      <li>
+        <Link to="/drawer">{'<Drawer>'}</Link>
+      </li>
     </ul>
   </div>
 );