diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index 0391ef18..41a58813 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -63,10 +63,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Range
 
-<DatePicker datePickerType="range" on:change>
-  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
-  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
-</DatePicker>
+<FileSource src="/framed/DatePicker/DatePickerRange" />
 
 ### Skeleton
 
diff --git a/docs/src/pages/framed/DatePicker/DatePickerRange.svelte b/docs/src/pages/framed/DatePicker/DatePickerRange.svelte
new file mode 100644
index 00000000..6bbc2f55
--- /dev/null
+++ b/docs/src/pages/framed/DatePicker/DatePickerRange.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="range" on:change>
+  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
+</DatePicker>