diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index a6cae4af..30dd2a96 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -69,6 +69,10 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 <FileSource src="/framed/DatePicker/DatePickerRange" />
 
+### DatePicker in a modal
+
+<FileSource src="/framed/DatePicker/DatePickerModal" />
+
 ### Skeleton
 
-<DatePickerSkeleton />
\ No newline at end of file
+<DatePickerSkeleton />
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
new file mode 100644
index 00000000..3940d610
--- /dev/null
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<Modal open modalHeading="DatePicker">
+  <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
+    <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
+  </DatePicker>
+</Modal>