diff --git a/src/lib/components/drawer/Backdrop.svelte b/src/lib/components/drawer/Backdrop.svelte
index 670e779..37f4861 100644
--- a/src/lib/components/drawer/Backdrop.svelte
+++ b/src/lib/components/drawer/Backdrop.svelte
@@ -4,7 +4,7 @@
 	import { getContext } from 'svelte';
 
 	const defaultClass =
-		'fixed inset-0 bg-background bg-opacity-10 backdrop-blur-sm transition-opacity pointer-events-auto';
+		'fixed inset-0 bg-background bg-opacity-10 backdrop-blur-sm transition-opacity pointer-events-auto stwui-drawer-backdrop';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	const handleClose: () => void = getContext('drawer-handleClose');
diff --git a/src/lib/components/drawer/Content.svelte b/src/lib/components/drawer/Content.svelte
index cf22557..8ada6b6 100644
--- a/src/lib/components/drawer/Content.svelte
+++ b/src/lib/components/drawer/Content.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'relative flex-grow text-content p-4';
+	const defaultClass = 'relative flex-grow text-content p-4 stwui-drawer-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/drawer/Drawer.svelte b/src/lib/components/drawer/Drawer.svelte
index 7740cf2..8f36801 100644
--- a/src/lib/components/drawer/Drawer.svelte
+++ b/src/lib/components/drawer/Drawer.svelte
@@ -90,10 +90,12 @@
 		}
 	}
 
-	const defaultClass = 'flex inner-panel flex-col bg-surface overflow-hidden';
+	const defaultClass =
+		'flex inner-panel flex-col bg-surface overflow-hidden stwui-drawer-inner-panel';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
-	const defaultPanelClass = 'pointer-events-auto panel transition-transform duration-200';
+	const defaultPanelClass =
+		'pointer-events-auto panel transition-transform duration-200 stwui-drawer-panel';
 	$: finalPanelClass = twMerge(defaultPanelClass, panelClass);
 
 	setContext('drawer-handleClose', onClose);
@@ -106,7 +108,7 @@
 
 <svelte:window on:keydown={captureEscapeEvent} />
 
-<div class="relative z-10" role="dialog">
+<div class="relative z-10 stwui-drawer-wrapper" role="dialog">
 	{#if $$slots.backdrop}
 		<slot name="backdrop" />
 	{:else}
diff --git a/src/lib/components/drawer/Footer.svelte b/src/lib/components/drawer/Footer.svelte
index 3ceeb20..7a61ff2 100644
--- a/src/lib/components/drawer/Footer.svelte
+++ b/src/lib/components/drawer/Footer.svelte
@@ -7,7 +7,7 @@
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
 	const defaultClass =
-		'px-4 sm:px-6 py-4 text-content shadow-negative-md flex-shrink border-t border-border';
+		'px-4 sm:px-6 py-4 text-content shadow-negative-md flex-shrink border-t border-border stwui-drawer-footer';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
diff --git a/src/lib/components/drawer/Header.svelte b/src/lib/components/drawer/Header.svelte
index 2a67c8e..140671c 100644
--- a/src/lib/components/drawer/Header.svelte
+++ b/src/lib/components/drawer/Header.svelte
@@ -12,7 +12,7 @@
 	const handleClose: () => void = getContext('drawer-handleClose');
 
 	const defaultClass =
-		'px-4 sm:px-6 py-4 shadow-md flex-shrink text-lg font-medium text-content border-b border-border';
+		'px-4 sm:px-6 py-4 shadow-md flex-shrink text-lg font-medium text-content border-b border-border stwui-drawer-header';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>