diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 30dd2a96..1374344f 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -71,6 +71,12 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### DatePicker in a modal
 
+Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element.
+
+This is needed when placing a `DatePicker` inside of a `Modal` component.
+
+Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options.
+
 <FileSource src="/framed/DatePicker/DatePickerModal" />
 
 ### Skeleton
diff --git a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
index 3940d610..ea33e5e9 100644
--- a/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
+++ b/docs/src/pages/framed/DatePicker/DatePickerModal.svelte
@@ -2,7 +2,12 @@
   import { Modal, DatePicker, DatePickerInput } from "carbon-components-svelte";
 </script>
 
-<Modal open modalHeading="DatePicker">
+<Modal
+  open
+  modalHeading="Meeting date"
+  primaryButtonText="Confirm"
+  secondaryButtonText="Cancel"
+>
   <DatePicker datePickerType="single" flatpickrProps="{{ static: true }}">
     <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
   </DatePicker>