diff --git a/bun.lockb b/bun.lockb
index 23a144f..7f683ad 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index f4a2e78..2782a76 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "scripts": {
     "bump:version": "bunx changelogen --bump --no-output",
@@ -39,6 +39,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.51.2",
+    "sonner": "^1.4.41",
     "tailwind-merge": "2.2.2",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "3.4.3",
diff --git a/sonner.tsx b/sonner.tsx
new file mode 100644
index 0000000..dc1a68c
--- /dev/null
+++ b/sonner.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import type { ComponentProps } from "react";
+// @ts-ignore -- not sure why this is not working
+import { Toaster as Sonner } from "sonner";
+import cn from "./cn";
+
+type ToasterProps = ComponentProps<typeof Sonner>;
+
+export default function Toaster({ ...props }: ToasterProps) {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group border-"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:border-1 group-[.toaster]:shadow-sm",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      cn={cn}
+      {...props}
+    />
+  );
+}