diff --git a/.changeset/silver-penguins-jam.md b/.changeset/silver-penguins-jam.md
new file mode 100644
index 000000000..04ac7168c
--- /dev/null
+++ b/.changeset/silver-penguins-jam.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': minor
+---
+
+Add support for passing `class` and `classes` props to the DateField component
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
index 57ae00ceb..a3f002e02 100644
--- a/packages/svelte-ux/src/lib/components/DateField.svelte
+++ b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
   import { parse as parseDate } from 'date-fns';
   import { PeriodType } from '../utils';
   import { getComponentSettings, getSettings } from './settings';
+  import { cls } from '../utils/styles';
 
   import Field from './Field.svelte';
 
@@ -21,6 +22,11 @@
   $: actualFormat = format ?? $format_ux.settings.formats.dates.baseParsing ?? 'MM/dd/yyyy';
   $: actualMask = mask ?? actualFormat.toLowerCase();
 
+  export let classes: {
+    root?: string;
+    field?: ComponentProps<Field>['classes'];
+  } = {};
+
   // Field props
   export let label = '';
   export let labelPlacement = defaults.labelPlacement;
@@ -46,9 +52,12 @@
       dispatch('change', { value });
     }
   }
+
+  $: restProps = { ...defaults, ...$$restProps };
 </script>
 
 <Field
+  {...restProps}
   {label}
   {value}
   {icon}
@@ -65,6 +74,8 @@
     inputValue = undefined;
     dispatch('change', { value });
   }}
+  classes={classes.field}
+  class={cls('DateField', settingsClasses.root, classes.root, $$props.class)}
   let:id
 >
   <Input