diff --git a/packages/ui/src/lib/components/Alert.svelte b/packages/ui/src/lib/components/Alert.svelte
index 0ece75c0..a45b731e 100644
--- a/packages/ui/src/lib/components/Alert.svelte
+++ b/packages/ui/src/lib/components/Alert.svelte
@@ -59,7 +59,7 @@
 	const { divClass, iconClass, titleClass, descriptionClass } = alert({ variant });
 </script>
 
-<div {...$$restProps} role="alert" class={divClass()}>
+<div {...$$restProps} role="alert" class={divClass({ class: $$props.class })}>
 	<div class={iconClass()}>
 		{#if icon}
 			<Icon src={icon} theme="solid" class="h-5 w-5" />
diff --git a/packages/ui/src/lib/components/Badge.svelte b/packages/ui/src/lib/components/Badge.svelte
index e1b75ca2..b5035205 100644
--- a/packages/ui/src/lib/components/Badge.svelte
+++ b/packages/ui/src/lib/components/Badge.svelte
@@ -76,7 +76,7 @@
 	const { spanClass, iconClass, textClass, buttonClass } = badge({ variant, loading });
 </script>
 
-<span {...$$restProps} class={spanClass()}>
+<span {...$$restProps} class={spanClass({ class: $$props.class })}>
 	<span class="h-5">
 		{#if _icon}
 			<Icon src={_icon} theme="solid" class={iconClass()} />