diff --git a/src/components/ui/sonner/index.ts b/src/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/src/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/components/ui/sonner/sonner.svelte b/src/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..3ea4de7
--- /dev/null
+++ b/src/components/ui/sonner/sonner.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import {
+    Toaster as Sonner,
+    type ToasterProps as SonnerProps,
+  } from "svelte-sonner";
+  import { mode } from "mode-watcher";
+
+  let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+  theme={mode.current}
+  class="toaster group"
+  toastOptions={{
+    classes: {
+      toast:
+        "group toast dark:group-[.toaster]:bg-neutral-900 group-[.toaster]:font-sans",
+      description: "group-[.toast]:text-xs font-mono",
+    },
+  }}
+  {...restProps}
+/>