From b6083ce1047cb3ebc05a05edb624db42dd91f2d2 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 1 May 2024 18:12:10 +0300
Subject: [PATCH] docs: added documentation for toast component changes (#7141)

* docs: added documentation for toast component changes

* added redirect from use-toast docs to upgrade guide

* remove unused file

* content linting fixes

* update UI package version

* updated ui preset

* fix upgrade guides main page
---
 .../upgrade-guides/medusa-ui/3-0-0.mdx        | 115 ++++++++
 .../docs/src/utils/get-first-category-item.ts |   2 +-
 www/apps/ui/package.json                      |   4 +-
 www/apps/ui/src/config/colors.ts              | 250 +++++++++---------
 www/apps/ui/src/config/docs.tsx               |   5 -
 .../ui/src/content/docs/components/toast.mdx  |  45 +++-
 .../ui/src/content/docs/hooks/use-toast.mdx   |  30 ---
 www/apps/ui/src/examples/toaster-demo.tsx     |   7 +-
 www/apps/ui/src/examples/toaster-dismiss.tsx  |  19 ++
 www/apps/ui/src/examples/toaster-error.tsx    |   8 +-
 www/apps/ui/src/examples/toaster-loading.tsx  |   8 +-
 www/apps/ui/src/examples/toaster-success.tsx  |   8 +-
 www/apps/ui/src/examples/toaster-warning.tsx  |   8 +-
 .../ui/src/examples/toaster-with-action.tsx   |   8 +-
 www/apps/ui/src/props/hooks/ToasterToast.tsx  |  44 ---
 www/apps/ui/src/props/hooks/useToast.tsx      |  34 ---
 .../ui/src/registries/example-registry.tsx    |   5 +
 www/apps/ui/src/registries/hook-registry.tsx  |   6 -
 .../ui/src/specs/Toast/Toast.Viewport.json    |   6 -
 www/apps/ui/src/specs/Toast/Toast.json        | 106 +++++---
 .../specs/ToastProvider/ToastProvider.json    |   6 -
 www/apps/ui/src/specs/Toaster/Toaster.json    |  93 ++++++-
 www/apps/ui/vercel.json                       |   8 +-
 www/yarn.lock                                 |  77 +++++-
 24 files changed, 559 insertions(+), 343 deletions(-)
 create mode 100644 www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx
 delete mode 100644 www/apps/ui/src/content/docs/hooks/use-toast.mdx
 create mode 100644 www/apps/ui/src/examples/toaster-dismiss.tsx
 delete mode 100644 www/apps/ui/src/props/hooks/ToasterToast.tsx
 delete mode 100644 www/apps/ui/src/props/hooks/useToast.tsx
 delete mode 100644 www/apps/ui/src/specs/Toast/Toast.Viewport.json
 delete mode 100644 www/apps/ui/src/specs/ToastProvider/ToastProvider.json

diff --git a/www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx b/www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx
new file mode 100644
index 0000000000..cc7e41997f
--- /dev/null
+++ b/www/apps/docs/content/upgrade-guides/medusa-ui/3-0-0.mdx
@@ -0,0 +1,115 @@
+---
+description: "Actions Required for v.3.0.0"
+sidebar_custom_props:
+  iconName: "component-solid"
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# v3.0.0
+
+Version 3.0.0 of Medusa UI introduces a breaking change for the toast components. This is due to a change in the underlying toast library from Radix UI to [Sonner](https://sonner.emilkowal.ski/).
+
+## How to Update
+
+Run the following command in your project:
+
+```bash npm2yarn
+npm install @medusajs/ui@3.0.0
+```
+
+---
+
+## Breaking Changes
+
+### useToast Hook
+
+Previously, you created a toast using the `useToast` hook, which provides a utility function. In this version, the `useToast` hook is removed and, instead, a new `toast` utility is exported. The `toast` utility has functions that create toasts for different variants, such as `warning` and `error`.
+
+For example, here's before and after update code to see the difference:
+
+<Tabs groupId="ui" isCodeTabs={true}>
+  <TabItem label="Before" value="before">
+
+  ```tsx
+  import { Button, Toaster, useToast } from "@medusajs/ui"
+
+  export default function ToasterDemo() {
+    const { toast } = useToast()
+
+    return (
+      <>
+        <Toaster />
+        <Button
+          onClick={() =>
+            toast({
+              title: "Info",
+              description: "Hello there",
+            })
+          }
+        >
+          Show
+        </Button>
+      </>
+    )
+  }
+  ```
+
+  </TabItem>
+  <TabItem label="After" value="after">
+
+  ```tsx
+  import { Button, Toaster, toast } from "@medusajs/ui"
+
+  export default function ToasterDemo() {
+    return (
+      <>
+        <Toaster />
+        <Button
+          onClick={() =>
+            toast.info("Info", {
+              description: "Hello there",
+            })
+          }
+        >
+          Show
+        </Button>
+      </>
+    )
+  }
+  ```
+
+  </TabItem>
+</Tabs>
+
+Learn more about the `toast` utility in the [UI documentation](https://docs.medusajs.com/ui/components/toast).
+
+### Toaster Default Position
+
+The default position has changed from `top-right` to `bottom-right`. You can change the position of the created toasts by passing the `position` prop to the `Toaster` component.
+
+For example:
+
+```tsx
+import { Button, Toaster, toast } from "@medusajs/ui"
+
+export default function ToasterDemo() {
+  return (
+    <>
+      <Toaster position="top-right" />
+      <Button
+        onClick={() =>
+          toast.info("Info", {
+            description: "Hello there",
+          })
+        }
+      >
+        Show
+      </Button>
+    </>
+  )
+}
+```
+
+Learn more about the `Toaster`'s props in the [UI documentation](https://docs.medusajs.com/ui/components/toast).
diff --git a/www/apps/docs/src/utils/get-first-category-item.ts b/www/apps/docs/src/utils/get-first-category-item.ts
index 41910645c1..5ffd0ff2db 100644
--- a/www/apps/docs/src/utils/get-first-category-item.ts
+++ b/www/apps/docs/src/utils/get-first-category-item.ts
@@ -14,7 +14,7 @@ export function getCategoryItems({ categoryLabel, categoryCustomId }: Options) {
     useDocsSidebar().items,
     (item) =>
       item.label === categoryLabel ||
-      item.customProps.category_id === categoryCustomId
+      (categoryCustomId && item.customProps.category_id === categoryCustomId)
   )?.items
 }
 
diff --git a/www/apps/ui/package.json b/www/apps/ui/package.json
index 0380d09fdc..7c32f84a23 100644
--- a/www/apps/ui/package.json
+++ b/www/apps/ui/package.json
@@ -15,8 +15,8 @@
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
     "@medusajs/icons": "^1.2.0",
-    "@medusajs/ui": "^2.4.1",
-    "@medusajs/ui-preset": "latest",
+    "@medusajs/ui": "^3.0.0",
+    "@medusajs/ui-preset": "^1.1.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-scroll-area": "^1.0.4",
     "@radix-ui/react-tabs": "^1.0.4",
diff --git a/www/apps/ui/src/config/colors.ts b/www/apps/ui/src/config/colors.ts
index c1314dd592..87acddcdd0 100644
--- a/www/apps/ui/src/config/colors.ts
+++ b/www/apps/ui/src/config/colors.ts
@@ -1,33 +1,8 @@
 export const colors = {
   dark: {
-    "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
-    "--border-base": "rgba(46, 48, 53, 1)",
-    "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
-    "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
-    "--bg-switch-off": "rgba(53, 55, 60, 1)",
-    "--border-strong": "rgba(53, 55, 60, 1)",
-    "--fg-subtle": "rgba(173, 177, 184, 1)",
-    "--fg-base": "rgba(237, 238, 240, 1)",
-    "--bg-base-hover": "rgba(39, 40, 45, 1)",
-    "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
-    "--fg-disabled": "rgba(60, 63, 68, 1)",
-    "--bg-subtle": "rgba(24, 24, 26, 1)",
-    "--tag-neutral-border": "rgba(60, 63, 68, 1)",
-    "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
-    "--tag-neutral-text": "rgba(173, 177, 184, 1)",
-    "--fg-muted": "rgba(105, 110, 119, 1)",
-    "--border-loud": "rgba(237, 238, 240, 1)",
-    "--bg-base-pressed": "rgba(46, 48, 53, 1)",
-    "--bg-disabled": "rgba(39, 40, 45, 1)",
-    "--code-fg-subtle": "rgba(105, 110, 119, 1)",
-    "--code-fg-base": "rgba(237, 238, 240, 1)",
-    "--code-bg-subtle": "rgba(24, 24, 26, 1)",
-    "--code-fg-muted": "rgba(70, 75, 80, 1)",
-    "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
     "--border-interactive": "rgba(96, 165, 250, 1)",
-    "--bg-highlight": "rgba(23, 37, 84, 1)",
     "--fg-interactive-hover": "rgba(59, 130, 246, 1)",
     "--fg-error": "rgba(251, 113, 133, 1)",
     "--bg-interactive": "rgba(96, 165, 250, 1)",
@@ -36,24 +11,18 @@ export const colors = {
     "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
     "--fg-interactive": "rgba(96, 165, 250, 1)",
-    "--bg-overlay": "rgba(24, 24, 26, 0.7)",
-    "--fg-on-inverted": "rgba(24, 24, 26, 1)",
     "--tag-red-border": "rgba(136, 19, 55, 1)",
     "--tag-red-bg": "rgba(76, 5, 25, 1)",
-    "--button-transparent-hover": "rgba(39, 40, 45, 1)",
     "--tag-blue-text": "rgba(96, 165, 250, 1)",
     "--tag-orange-text": "rgba(251, 191, 36, 1)",
     "--tag-green-text": "rgba(52, 211, 153, 1)",
-    "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
     "--tag-orange-border": "rgba(120, 53, 15, 1)",
     "--tag-green-border": "rgba(6, 78, 59, 1)",
-    "--bg-base": "rgba(27, 27, 31, 1)",
     "--tag-red-text": "rgba(251, 113, 133, 1)",
     "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
     "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
     "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
     "--border-transparent": "rgba(255, 255, 255, 0)",
-    "--code-border": "rgba(46, 48, 53, 1)",
     "--tag-orange-icon": "rgba(245, 158, 11, 1)",
     "--tag-purple-bg": "rgba(46, 16, 100, 1)",
     "--tag-blue-bg": "rgba(23, 37, 84, 1)",
@@ -63,42 +32,11 @@ export const colors = {
     "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
     "--tag-orange-bg": "rgba(69, 26, 3, 1)",
     "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
-    "--code-bg-base": "rgba(27, 27, 31, 1)",
-    "--button-neutral": "rgba(39, 40, 45, 1)",
-    "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
-    "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
     "--tag-blue-icon": "rgba(59, 130, 246, 1)",
     "--tag-red-icon": "rgba(244, 63, 94, 1)",
     "--tag-purple-icon": "rgba(139, 92, 246, 1)",
     "--tag-purple-text": "rgba(167, 139, 250, 1)",
     "--tag-green-icon": "rgba(16, 185, 129, 1)",
-    "--button-inverted": "rgba(237, 238, 240, 1)",
-    "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
-    "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
-    "--bg-component": "rgba(39, 40, 45, 1)",
-    "--bg-field": "rgba(39, 40, 45, 1)",
-    "--bg-field-hover": "rgba(46, 48, 53, 1)",
-    "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
-    "--contrast-bg-base": "rgba(228, 228, 233, 1)",
-    "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
-    "--contrast-border-base": "rgba(185, 187, 198, 1)",
-    "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
-    "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
-    "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
-    "--contrast-bg-highlight": "rgba(242, 242, 245, 1)",
-    "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
-    "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
-    "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
-    "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
-    "--button-neutral-hover": "rgba(53, 55, 60, 1)",
-    "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-hover": "rgba(255, 255, 255, 1)",
-    "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
-    "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
     "--button-danger-pressed": "rgba(225, 29, 72, 1)",
     "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
@@ -106,113 +44,183 @@ export const colors = {
     "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-transparent": "rgba(0, 0, 0, 0.01)",
-  },
-  light: {
-    "--button-inverted": "rgba(3, 7, 18, 1)",
+    "--code-bg-base": "rgba(9, 9, 11, 1)",
+    "--button-neutral": "rgba(39, 39, 42, 1)",
+    "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-transparent-hover": "rgba(39, 39, 42, 1)",
+    "--code-fg-subtle": "rgba(161, 161, 170, 1)",
+    "--tag-neutral-bg-hover": "rgba(63, 63, 70, 1)",
+    "--contrast-border-base": "rgba(82, 82, 91, 1)",
+    "--button-neutral-pressed": "rgba(82, 82, 91, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--tag-neutral-bg": "rgba(39, 39, 42, 1)",
+    "--bg-highlight": "rgba(23, 37, 84, 1)",
+    "--border-base": "rgba(255, 255, 255, 0.1)",
+    "--code-fg-base": "rgba(250, 250, 250, 1)",
+    "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
+    "--bg-switch-off-hover": "rgba(82, 82, 91, 1)",
+    "--bg-base": "rgba(24, 24, 27, 1)",
+    "--button-inverted-pressed": "rgba(161, 161, 170, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-neutral-hover": "rgba(63, 63, 70, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--bg-switch-off": "rgba(63, 63, 70, 1)",
+    "--border-strong": "rgba(255, 255, 255, 0.15)",
+    "--fg-subtle": "rgba(161, 161, 170, 1)",
+    "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
+    "--button-inverted": "rgba(82, 82, 91, 1)",
     "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
-    "--code-fg-subtle": "rgba(156, 163, 175, 1)",
-    "--code-fg-muted": "rgba(107, 114, 128, 1)",
-    "--code-bg-subtle": "rgba(31, 41, 55, 1)",
-    "--code-fg-base": "rgba(249, 250, 251, 1)",
+    "--fg-base": "rgba(250, 250, 250, 1)",
+    "--code-border": "rgba(39, 39, 42, 1)",
+    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--contrast-bg-base-hover": "rgba(82, 82, 91, 1)",
+    "--bg-base-hover": "rgba(39, 39, 42, 1)",
+    "--bg-subtle-hover": "rgba(24, 24, 27, 1)",
+    "--fg-disabled": "rgba(63, 63, 70, 1)",
+    "--bg-subtle": "rgba(9, 9, 11, 1)",
+    "--tag-neutral-border": "rgba(63, 63, 70, 1)",
+    "--bg-subtle-pressed": "rgba(39, 39, 42, 1)",
+    "--tag-neutral-text": "rgba(161, 161, 170, 1)",
+    "--fg-muted": "rgba(82, 82, 91, 1)",
+    "--bg-overlay": "rgba(9, 9, 11, 0.7)",
+    "--button-inverted-hover": "rgba(113, 113, 122, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--fg-on-inverted": "rgba(9, 9, 11, 1)",
+    "--code-bg-subtle": "rgba(24, 24, 27, 1)",
+    "--bg-component": "rgba(39, 39, 42, 1)",
+    "--border-loud": "rgba(250, 250, 250, 1)",
+    "--bg-base-pressed": "rgba(63, 63, 70, 1)",
+    "--bg-disabled": "rgba(39, 39, 42, 1)",
+    "--contrast-bg-highlight": "rgba(82, 82, 91, 1)",
+    "--button-transparent-pressed": "rgba(63, 63, 70, 1)",
+    "--code-fg-muted": "rgba(82, 82, 91, 1)",
+    "--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
+    "--contrast-bg-base-pressed": "rgba(113, 113, 122, 1)",
+    "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
+    "--contrast-bg-base": "rgba(63, 63, 70, 1)",
+    "--bg-component-pressed": "rgba(82, 82, 91, 1)",
+    "--bg-component-hover": "rgba(63, 63, 70, 1)",
+    "--bg-field": "rgba(39, 39, 42, 1)",
+    "--bg-field-component": "rgba(24, 24, 27, 1)",
+    "--bg-field-component-hover": "rgba(24, 24, 27, 1)",
+    "--bg-field-hover": "rgba(39, 39, 42, 1)",
+  },
+  light: {
     "--tag-green-bg": "rgba(209, 250, 229, 1)",
-    "--border-strong": "rgba(209, 213, 219, 1)",
     "--border-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight": "rgba(239, 246, 255, 1)",
-    "--tag-neutral-bg": "rgba(243, 244, 246, 1)",
     "--tag-red-bg": "rgba(255, 228, 230, 1)",
     "--tag-orange-bg": "rgba(254, 244, 199, 1)",
     "--bg-base": "rgba(255, 255, 255, 1)",
-    "--border-base": "rgba(229, 231, 235, 1)",
     "--tag-green-icon": "rgba(5, 150, 105, 1)",
     "--tag-purple-bg-hover": "rgba(221, 214, 254, 1)",
     "--tag-blue-border": "rgba(191, 219, 254, 1)",
     "--tag-orange-icon": "rgba(217, 119, 6, 1)",
     "--tag-purple-bg": "rgba(237, 233, 254, 1)",
-    "--bg-subtle": "rgba(249, 250, 251, 1)",
     "--tag-purple-text": "rgba(109, 40, 217, 1)",
     "--tag-blue-bg": "rgba(219, 234, 254, 1)",
     "--tag-blue-icon": "rgba(37, 99, 235, 1)",
     "--border-error": "rgba(225, 29, 72, 1)",
-    "--border-loud": "rgba(3, 7, 18, 1)",
     "--fg-on-inverted": "rgba(255, 255, 255, 1)",
     "--fg-on-color": "rgba(255, 255, 255, 1)",
     "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
     "--fg-interactive": "rgba(59, 130, 246, 1)",
     "--fg-error": "rgba(225, 29, 72, 1)",
     "--border-danger": "rgba(190, 18, 60, 1)",
-    "--border-transparent": "rgba(3, 7, 18, 0)",
-    "--fg-base": "rgba(3, 7, 18, 1)",
-    "--fg-disabled": "rgba(209, 213, 219, 1)",
-    "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
-    "--fg-subtle": "rgba(75, 85, 99, 1)",
-    "--fg-muted": "rgba(156, 163, 175, 1)",
-    "--bg-subtle-hover": "rgba(243, 244, 246, 1)",
-    "--tag-neutral-border": "rgba(229, 231, 235, 1)",
+    "--fg-muted": "rgba(161, 161, 170, 1)",
+    "--bg-subtle-pressed": "rgba(228, 228, 231, 1)",
     "--tag-green-bg-hover": "rgba(167, 243, 208, 1)",
     "--tag-blue-bg-hover": "rgba(191, 219, 254, 1)",
     "--tag-red-icon": "rgba(225, 29, 72, 1)",
-    "--tag-neutral-text": "rgba(75, 85, 99, 1)",
     "--tag-red-bg-hover": "rgba(254, 205, 211, 1)",
     "--tag-red-text": "rgba(190, 18, 60, 1)",
     "--tag-purple-icon": "rgba(124, 58, 237, 1)",
     "--tag-blue-text": "rgba(29, 78, 216, 1)",
     "--tag-orange-bg-hover": "rgba(253, 230, 138, 1)",
-    "--tag-neutral-bg-hover": "rgba(229, 231, 235, 1)",
     "--tag-purple-border": "rgba(221, 214, 254, 1)",
     "--tag-orange-text": "rgba(180, 83, 9, 1)",
-    "--tag-neutral-icon": "rgba(107, 114, 128, 1)",
     "--tag-orange-border": "rgba(253, 230, 138, 1)",
     "--tag-red-border": "rgba(254, 205, 211, 1)",
     "--tag-green-border": "rgba(167, 243, 208, 1)",
     "--tag-green-text": "rgba(4, 120, 87, 1)",
-    "--code-bg-base": "rgba(17, 24, 39, 1)",
-    "--code-border": "rgba(55, 65, 81, 1)",
-    "--button-neutral": "rgba(255, 255, 255, 1)",
-    "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
     "--button-danger": "rgba(225, 29, 72, 1)",
     "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
-    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-pressed": "rgba(159, 18, 57, 1)",
     "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
-    "--button-inverted-hover": "rgba(17, 24, 39, 1)",
-    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
-    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
     "--button-danger-hover": "rgba(190, 18, 60, 1)",
     "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
     "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
-    "--bg-component": "rgba(241, 243, 245, 1)",
-    "--bg-overlay": "rgba(3, 7, 18, 0.4)",
-    "--bg-switch-off": "rgba(229, 231, 235, 1)",
-    "--bg-field-hover": "rgba(243, 244, 246, 1)",
-    "--bg-field": "rgba(249, 250, 251, 1)",
     "--bg-interactive": "rgba(59, 130, 246, 1)",
     "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
-    "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
-    "--bg-disabled": "rgba(243, 244, 246, 1)",
-    "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
-    "--contrast-bg-base": "rgba(27, 27, 31, 1)",
-    "--contrast-border-base": "rgba(60, 63, 68, 1)",
-    "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
-    "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
-    "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
-    "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
-    "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)",
-    "--button-transparent-hover": "rgba(243, 244, 246, 1)",
-    "--button-neutral-pressed": "rgba(229, 231, 235, 1)",
-    "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
-    "--button-transparent-pressed": "rgba(229, 231, 235, 1)",
-    "--button-neutral-hover": "rgba(243, 244, 246, 1)",
-    "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
-    "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
-    "--bg-base-pressed": "rgba(243, 244, 246, 1)",
-    "--bg-base-hover": "rgba(249, 250, 251, 1)",
     "--button-transparent": "rgba(255, 255, 255, 0.01)",
+    "--bg-overlay": "rgba(9, 9, 11, 0.4)",
+    "--tag-neutral-border": "rgba(228, 228, 231, 1)",
+    "--border-loud": "rgba(9, 9, 11, 1)",
+    "--contrast-fg-primary": "rgba(250, 250, 250, 1)",
+    "--bg-switch-off": "rgba(228, 228, 231, 1)",
+    "--contrast-bg-base-pressed": "rgba(63, 63, 70, 1)",
+    "--bg-base-pressed": "rgba(228, 228, 231, 1)",
+    "--tag-neutral-text": "rgba(82, 82, 91, 1)",
+    "--button-transparent-hover": "rgba(244, 244, 245, 1)",
+    "--contrast-bg-base": "rgba(24, 24, 27, 1)",
+    "--fg-disabled": "rgba(212, 212, 216, 1)",
+    "--bg-field": "rgba(250, 250, 250, 1)",
+    "--border-strong": "rgba(212, 212, 216, 1)",
+    "--bg-field-hover": "rgba(244, 244, 245, 1)",
+    "--contrast-border-base": "rgba(82, 82, 91, 1)",
+    "--fg-base": "rgba(9, 9, 11, 1)",
+    "--contrast-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--contrast-fg-secondary": "rgba(161, 161, 170, 1)",
+    "--code-fg-subtle": "rgba(161, 161, 170, 1)",
+    "--tag-neutral-bg": "rgba(244, 244, 245, 1)",
+    "--button-transparent-pressed": "rgba(228, 228, 231, 1)",
+    "--tag-neutral-bg-hover": "rgba(228, 228, 231, 1)",
+    "--code-fg-muted": "rgba(113, 113, 122, 1)",
+    "--contrast-bg-highlight": "rgba(63, 63, 70, 1)",
+    "--tag-neutral-icon": "rgba(113, 113, 122, 1)",
+    "--border-base": "rgba(228, 228, 231, 1)",
+    "--code-bg-base": "rgba(24, 24, 27, 1)",
+    "--button-neutral": "rgba(255, 255, 255, 1)",
+    "--button-neutral-gradient-from": "rgba(9, 9, 11, 0)",
+    "--button-neutral-gradient-to": "rgba(9, 9, 11, 1)",
+    "--code-bg-subtle": "rgba(39, 39, 42, 1)",
+    "--button-neutral-hover": "rgba(244, 244, 245, 1)",
+    "--button-neutral-hover-gradient-from": "rgba(9, 9, 11, 0)",
+    "--button-neutral-hover-gradient-to": "rgba(9, 9, 11, 1)",
+    "--contrast-bg-base-hover": "rgba(39, 39, 42, 1)",
+    "--bg-subtle": "rgba(250, 250, 250, 1)",
+    "--bg-switch-off-hover": "rgba(212, 212, 216, 1)",
+    "--code-fg-base": "rgba(250, 250, 250, 1)",
+    "--bg-disabled": "rgba(244, 244, 245, 1)",
+    "--code-border": "rgba(63, 63, 70, 1)",
+    "--fg-subtle": "rgba(82, 82, 91, 1)",
+    "--bg-subtle-hover": "rgba(244, 244, 245, 1)",
+    "--button-neutral-pressed": "rgba(228, 228, 231, 1)",
+    "--button-neutral-pressed-gradient-from": "rgba(9, 9, 11, 0)",
+    "--button-neutral-pressed-gradient-to": "rgba(9, 9, 11, 1)",
+    "--border-transparent": "rgba(9, 9, 11, 0)",
+    "--button-inverted": "rgba(9, 9, 11, 1)",
+    "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-pressed": "rgba(39, 39, 42, 1)",
+    "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
+    "--button-inverted-hover": "rgba(24, 24, 27, 1)",
+    "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
+    "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
+    "--bg-component-hover": "rgba(244, 244, 245, 1)",
+    "--bg-field-component": "rgba(255, 255, 255, 1)",
+    "--bg-field-component-hover": "rgba(250, 250, 250, 1)",
+    "--bg-component-pressed": "rgba(228, 228, 231, 1)",
+    "--bg-component": "rgba(250, 250, 250, 1)",
+    "--bg-base-hover": "rgba(244, 244, 245, 1)",
   },
 }
diff --git a/www/apps/ui/src/config/docs.tsx b/www/apps/ui/src/config/docs.tsx
index ac98c6c225..e9dd26b5ed 100644
--- a/www/apps/ui/src/config/docs.tsx
+++ b/www/apps/ui/src/config/docs.tsx
@@ -261,11 +261,6 @@ export const docsConfig: DocsConfig = {
             path: "/hooks/use-prompt",
             isPathHref: true,
           },
-          {
-            title: "useToast",
-            path: "/hooks/use-toast",
-            isPathHref: true,
-          },
           {
             title: "useToggleState",
             path: "/hooks/use-toggle-state",
diff --git a/www/apps/ui/src/content/docs/components/toast.mdx b/www/apps/ui/src/content/docs/components/toast.mdx
index 1a8b9fcf88..45dec5f500 100644
--- a/www/apps/ui/src/content/docs/components/toast.mdx
+++ b/www/apps/ui/src/content/docs/components/toast.mdx
@@ -10,31 +10,25 @@ component: true
 
 ---
 
-Add the Toaster component somewhere in your tree
+Import the `toast` utility and `Toaster` component from `@medusajs/ui`:
 
 ```tsx
-import { Toaster } from "@medusajs/ui"
+import { Toaster, toast } from "@medusajs/ui"
 ```
 
+Then, add the `Toaster` component somewhere in your tree:
+
 ```tsx
 <Toaster />
 ```
 
-The `useToast` hook returns a `toast` function that you can use to display a toast.
+Finally, use the `toast` utility to display a toast:
 
 ```tsx
-import { useToast } from "@medusajs/ui"
-```
-
-```tsx
-const { toast } = useToast()
-
 return (
-
   <Button 
     onClick={() => 
-      toast({ 
-        title: "Toast title",
+      toast.info("Toast title", {
         description: "Toast body",
       })
     }
@@ -46,12 +40,39 @@ return (
 
 ## API Reference
 
+---
+
+### Toast Utility Functions
+
+The `toast` utility has the following functions to display different variants of toasts:
+
+- `info`
+- `error`
+- `success`
+- `warning`
+- `loading`
+
+Each of these functions accept two parameters:
+
+1. A string indicating the title of the toast.
+2. An object of props to pass to the underlying `Toast` component.
+
+### Toast Props
+
 <ComponentReference mainComponent="Toast" />
 
+### Toaster Props
+
+<ComponentReference mainComponent="Toaster" />
+
 ## Examples
 
 ---
 
+### Dismissable Toast
+
+<ComponentExample name="toaster-dismiss" />
+
 ### Warning
 
 <ComponentExample name="toaster-warning" />
diff --git a/www/apps/ui/src/content/docs/hooks/use-toast.mdx b/www/apps/ui/src/content/docs/hooks/use-toast.mdx
deleted file mode 100644
index 2110cb2480..0000000000
--- a/www/apps/ui/src/content/docs/hooks/use-toast.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: "useToast"
-description: ""
-component: true
----
-
-
-This hook is used to display and manage toasts. To learn how to make it usable and to see some examples, please check the [Toast component page](/components/toast).
-
-```tsx
-import { useToast } from "@medusajs/ui"
-```
-
-## API Reference
-
----
-
-### Call Signature
-
-`useToast()`
-
-### useToast return
-
-<HookValues hook="useToast" />
-
-### ToasterToast
-
-Important type used when pushing or retrieving toasts. This extends the [Radix UI Toast Root](https://www.radix-ui.com/primitives/docs/components/toast#root) primitive type.
-
-<HookValues hook="ToasterToast" />
diff --git a/www/apps/ui/src/examples/toaster-demo.tsx b/www/apps/ui/src/examples/toaster-demo.tsx
index d8639446e2..a9ab75d1c8 100644
--- a/www/apps/ui/src/examples/toaster-demo.tsx
+++ b/www/apps/ui/src/examples/toaster-demo.tsx
@@ -1,15 +1,12 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterDemo() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Info",
+          toast.info("Info", {
             description: "The quick brown fox jumps over the lazy dog.",
           })
         }
diff --git a/www/apps/ui/src/examples/toaster-dismiss.tsx b/www/apps/ui/src/examples/toaster-dismiss.tsx
new file mode 100644
index 0000000000..a8a0768b17
--- /dev/null
+++ b/www/apps/ui/src/examples/toaster-dismiss.tsx
@@ -0,0 +1,19 @@
+import { Button, Toaster, toast } from "@medusajs/ui"
+
+export default function DismissableToaster() {
+  return (
+    <>
+      <Toaster />
+      <Button
+        onClick={() =>
+          toast.info("Info", {
+            description: "The quick brown fox jumps over the lazy dog.",
+            dismissable: true,
+          })
+        }
+      >
+        Show
+      </Button>
+    </>
+  )
+}
diff --git a/www/apps/ui/src/examples/toaster-error.tsx b/www/apps/ui/src/examples/toaster-error.tsx
index a591342600..728861c85f 100644
--- a/www/apps/ui/src/examples/toaster-error.tsx
+++ b/www/apps/ui/src/examples/toaster-error.tsx
@@ -1,17 +1,13 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterError() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Error",
+          toast.error("Error", {
             description: "The quick brown fox jumps over the lazy dog.",
-            variant: "error",
             duration: 5000,
           })
         }
diff --git a/www/apps/ui/src/examples/toaster-loading.tsx b/www/apps/ui/src/examples/toaster-loading.tsx
index c460f55e58..98854d7c76 100644
--- a/www/apps/ui/src/examples/toaster-loading.tsx
+++ b/www/apps/ui/src/examples/toaster-loading.tsx
@@ -1,17 +1,13 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterLoading() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Loading",
+          toast.loading("Loading", {
             description: "The quick brown fox jumps over the lazy dog.",
-            variant: "loading",
             duration: 5000,
           })
         }
diff --git a/www/apps/ui/src/examples/toaster-success.tsx b/www/apps/ui/src/examples/toaster-success.tsx
index 36d37b0e86..a63de286da 100644
--- a/www/apps/ui/src/examples/toaster-success.tsx
+++ b/www/apps/ui/src/examples/toaster-success.tsx
@@ -1,17 +1,13 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterSuccess() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Success",
+          toast.success("Success", {
             description: "The quick brown fox jumps over the lazy dog.",
-            variant: "success",
             duration: 5000,
           })
         }
diff --git a/www/apps/ui/src/examples/toaster-warning.tsx b/www/apps/ui/src/examples/toaster-warning.tsx
index 492e1ca770..0ecfb8e32d 100644
--- a/www/apps/ui/src/examples/toaster-warning.tsx
+++ b/www/apps/ui/src/examples/toaster-warning.tsx
@@ -1,17 +1,13 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterWarning() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Warning",
+          toast.warning("Warning", {
             description: "The quick brown fox jumps over the lazy dog.",
-            variant: "warning",
             duration: 5000,
           })
         }
diff --git a/www/apps/ui/src/examples/toaster-with-action.tsx b/www/apps/ui/src/examples/toaster-with-action.tsx
index 22f5fa7b92..68de5d948a 100644
--- a/www/apps/ui/src/examples/toaster-with-action.tsx
+++ b/www/apps/ui/src/examples/toaster-with-action.tsx
@@ -1,17 +1,13 @@
-import { Button, Toaster, useToast } from "@medusajs/ui"
+import { Button, Toaster, toast } from "@medusajs/ui"
 
 export default function ToasterWithAction() {
-  const { toast } = useToast()
-
   return (
     <>
       <Toaster />
       <Button
         onClick={() =>
-          toast({
-            title: "Created Product",
+          toast.success("Created Product", {
             description: "The product has been created.",
-            variant: "success",
             action: {
               altText: "Undo product creation",
               onClick: () => {},
diff --git a/www/apps/ui/src/props/hooks/ToasterToast.tsx b/www/apps/ui/src/props/hooks/ToasterToast.tsx
deleted file mode 100644
index c0bd7e0b89..0000000000
--- a/www/apps/ui/src/props/hooks/ToasterToast.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { HookTable } from "@/components/hook-table"
-import { HookDataMap } from "@/types/hooks"
-
-const ToasterToastValues: HookDataMap = [
-  {
-    value: "id",
-    type: "string",
-  },
-  {
-    value: "title",
-    type: "ReactNode",
-  },
-  {
-    value: "description",
-    type: "ReactNode",
-  },
-  {
-    value: "variant",
-    type: {
-      type: "enum",
-      values: ["info", "success", "warning", "error", "loading"],
-    },
-    description: `Defaults to "info"`,
-  },
-  {
-    value: "action",
-    type: {
-      type: "object",
-      name: "ToastActionElement",
-      shape:
-        "{\n  label: string\n  altText: string\n  onClick: () => void | Promise<void>\n}",
-    },
-  },
-  {
-    value: "disableDismiss",
-    type: "boolean",
-  },
-]
-
-const Props = () => {
-  return <HookTable props={ToasterToastValues} />
-}
-
-export default Props
diff --git a/www/apps/ui/src/props/hooks/useToast.tsx b/www/apps/ui/src/props/hooks/useToast.tsx
deleted file mode 100644
index c5bf019c32..0000000000
--- a/www/apps/ui/src/props/hooks/useToast.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { HookTable } from "@/components/hook-table"
-import { HookDataMap } from "@/types/hooks"
-
-const useToastValues: HookDataMap = [
-  {
-    value: "toast",
-    type: {
-      type: "function",
-      signature: `(toast: Omit<ToasterToast, "id">) => {\n  id: string,\n  dismiss: () => void,\n  update: (toast: ToasterToast) => void\n}`,
-    },
-    description:
-      "Function used to display new toasts. For the toast options, please check the ToasterToast reference below.",
-  },
-  {
-    value: "dismiss",
-    type: {
-      type: "function",
-      signature: "(toastId?: string) => void",
-    },
-    description: "Function used to hide a toast based on its id.",
-  },
-  {
-    value: "toasts",
-    type: "ToasterToast[]",
-    description:
-      "All the toasts that have been pushed to the context this hook was invoked in.",
-  },
-]
-
-const Props = () => {
-  return <HookTable props={useToastValues} />
-}
-
-export default Props
diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx
index 45d98011a9..e95d143ece 100644
--- a/www/apps/ui/src/registries/example-registry.tsx
+++ b/www/apps/ui/src/registries/example-registry.tsx
@@ -395,6 +395,11 @@ export const ExampleRegistry: Record<string, ExampleType> = {
     component: React.lazy(async () => import("@/examples/toaster-demo")),
     file: "src/examples/toaster-demo.tsx",
   },
+  "toaster-dismiss": {
+    name: "toaster-dismiss",
+    component: React.lazy(async () => import("@/examples/toaster-dismiss")),
+    file: "src/examples/toaster-dismiss.tsx",
+  },
   "toaster-warning": {
     name: "toaster-warning",
     component: React.lazy(async () => import("@/examples/toaster-warning")),
diff --git a/www/apps/ui/src/registries/hook-registry.tsx b/www/apps/ui/src/registries/hook-registry.tsx
index 5105155867..55096fb03c 100644
--- a/www/apps/ui/src/registries/hook-registry.tsx
+++ b/www/apps/ui/src/registries/hook-registry.tsx
@@ -2,12 +2,6 @@ import { HookRegistryItem } from "@/types/hooks"
 import * as React from "react"
 
 export const HookRegistry: Record<string, HookRegistryItem> = {
-  useToast: {
-    table: React.lazy(async () => import("../props/hooks/useToast")),
-  },
-  ToasterToast: {
-    table: React.lazy(async () => import("../props/hooks/ToasterToast")),
-  },
   usePrompt: {
     table: React.lazy(async () => import("../props/hooks/usePrompt")),
   },
diff --git a/www/apps/ui/src/specs/Toast/Toast.Viewport.json b/www/apps/ui/src/specs/Toast/Toast.Viewport.json
deleted file mode 100644
index 2dddb902be..0000000000
--- a/www/apps/ui/src/specs/Toast/Toast.Viewport.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "description": "",
-  "methods": [],
-  "displayName": "Toast.Viewport",
-  "props": {}
-}
\ No newline at end of file
diff --git a/www/apps/ui/src/specs/Toast/Toast.json b/www/apps/ui/src/specs/Toast/Toast.json
index c81cb254c6..d835e0e187 100644
--- a/www/apps/ui/src/specs/Toast/Toast.json
+++ b/www/apps/ui/src/specs/Toast/Toast.json
@@ -1,67 +1,103 @@
 {
-  "description": "This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.",
+  "description": "This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.",
   "methods": [],
   "displayName": "Toast",
   "props": {
-    "variant": {
-      "required": false,
+    "id": {
+      "required": true,
       "tsType": {
         "name": "union",
-        "raw": "\"info\" | \"success\" | \"warning\" | \"error\" | \"loading\"",
+        "raw": "string | number",
         "elements": [
           {
-            "name": "literal",
-            "value": "\"info\""
+            "name": "string"
           },
           {
-            "name": "literal",
-            "value": "\"success\""
-          },
-          {
-            "name": "literal",
-            "value": "\"warning\""
-          },
-          {
-            "name": "literal",
-            "value": "\"error\""
-          },
-          {
-            "name": "literal",
-            "value": "\"loading\""
+            "name": "number"
           }
         ]
       },
-      "description": "The toast's style."
-    },
-    "title": {
-      "required": false,
-      "tsType": {
-        "name": "string"
-      },
-      "description": "The toast's title."
+      "description": "Optional ID of the toast."
     },
     "description": {
       "required": false,
       "tsType": {
         "name": "string"
       },
-      "description": "The toast's content."
+      "description": "The toast's text."
     },
     "action": {
       "required": false,
       "tsType": {
-        "name": "ActionProps"
+        "name": "signature",
+        "type": "object",
+        "raw": "&#123; altText: string ; label: string ; onClick: () => void \\| Promise&#60;void&#62; ; variant?: ToastActionVariant  &#125;",
+        "signature": {
+          "properties": [
+            {
+              "key": "altText",
+              "value": {
+                "name": "string"
+              },
+              "description": "The button's alt text."
+            },
+            {
+              "key": "label",
+              "value": {
+                "name": "string"
+              },
+              "description": "The button's text."
+            },
+            {
+              "key": "onClick",
+              "value": {
+                "name": "signature",
+                "type": "function",
+                "raw": "() => void \\| Promise&#60;void&#62;",
+                "signature": {
+                  "arguments": [],
+                  "return": {
+                    "name": "void \\| Promise&#60;void&#62;"
+                  }
+                }
+              },
+              "description": "The function to execute when the button is clicked."
+            },
+            {
+              "key": "variant",
+              "value": {
+                "name": "ToastActionVariant",
+                "elements": [
+                  {
+                    "name": "union",
+                    "raw": "\"default\" \\| \"destructive\"",
+                    "elements": [
+                      {
+                        "name": "\"default\""
+                      },
+                      {
+                        "name": "\"destructive\""
+                      }
+                    ]
+                  }
+                ],
+                "raw": "ToastActionVariant"
+              },
+              "description": "The button's variant."
+            }
+          ]
+        }
       },
-      "description": "The actions to show in the toast as buttons."
+      "description": "The toast's action buttons."
     },
-    "disableDismiss": {
+    "dismissLabel": {
       "required": false,
       "tsType": {
-        "name": "boolean"
+        "name": "string"
       },
-      "description": "Whether to hide the Close button.",
+      "description": "The label of the dismiss button, if available.",
       "defaultValue": {
-        "value": "false",
+        "value": "\"Close\"",
         "computed": false
       }
     }
diff --git a/www/apps/ui/src/specs/ToastProvider/ToastProvider.json b/www/apps/ui/src/specs/ToastProvider/ToastProvider.json
deleted file mode 100644
index 20552f510d..0000000000
--- a/www/apps/ui/src/specs/ToastProvider/ToastProvider.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "description": "",
-  "methods": [],
-  "displayName": "ToastProvider",
-  "props": {}
-}
\ No newline at end of file
diff --git a/www/apps/ui/src/specs/Toaster/Toaster.json b/www/apps/ui/src/specs/Toaster/Toaster.json
index 28cef3d8ce..88cda67c14 100644
--- a/www/apps/ui/src/specs/Toaster/Toaster.json
+++ b/www/apps/ui/src/specs/Toaster/Toaster.json
@@ -1,6 +1,95 @@
 {
-  "description": "",
+  "description": "This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).",
   "methods": [],
   "displayName": "Toaster",
-  "props": {}
+  "props": {
+    "position": {
+      "defaultValue": {
+        "value": "\"bottom-right\"",
+        "computed": false
+      },
+      "description": "The position of the created toasts.",
+      "tsType": {
+        "name": "Position",
+        "elements": [
+          {
+            "name": "union",
+            "raw": "\"top-left\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-right\" \\| \"top-center\" \\| \"bottom-center\"",
+            "elements": [
+              {
+                "name": "literal",
+                "value": "\"top-left\""
+              },
+              {
+                "name": "literal",
+                "value": "\"top-right\""
+              },
+              {
+                "name": "literal",
+                "value": "\"bottom-left\""
+              },
+              {
+                "name": "literal",
+                "value": "\"bottom-right\""
+              },
+              {
+                "name": "literal",
+                "value": "\"top-center\""
+              },
+              {
+                "name": "literal",
+                "value": "\"bottom-center\""
+              }
+            ]
+          }
+        ],
+        "raw": "Position"
+      },
+      "required": false
+    },
+    "gap": {
+      "defaultValue": {
+        "value": "12",
+        "computed": false
+      },
+      "description": "The gap between the toast components.",
+      "tsType": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "offset": {
+      "defaultValue": {
+        "value": "24",
+        "computed": false
+      },
+      "description": "The space from the edges of the screen.",
+      "tsType": {
+        "name": "union",
+        "raw": "string \\| number",
+        "elements": [
+          {
+            "name": "string"
+          },
+          {
+            "name": "number"
+          }
+        ]
+      },
+      "required": false
+    },
+    "duration": {
+      "description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n",
+      "tsType": {
+        "name": "number"
+      },
+      "defaultValue": {
+        "value": "4000",
+        "computed": false
+      }
+    }
+  },
+  "composes": [
+    "Omit"
+  ]
 }
\ No newline at end of file
diff --git a/www/apps/ui/vercel.json b/www/apps/ui/vercel.json
index 323833758c..e88ccbe8b7 100644
--- a/www/apps/ui/vercel.json
+++ b/www/apps/ui/vercel.json
@@ -3,5 +3,11 @@
   "installCommand": "yarn install",
   "buildCommand": "turbo run build",
   "outputDirectory": ".next",
-  "ignoreCommand": "bash ../../ignore-build-script.sh"
+  "ignoreCommand": "bash ../../ignore-build-script.sh",
+  "redirects": [
+    {
+      "source": "/ui/hooks/use-toast",
+      "destination": "/upgrade-guides/medusa-ui/3-0-0"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/www/yarn.lock b/www/yarn.lock
index a2c030a84d..da1608c61a 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -4337,7 +4337,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@medusajs/ui-preset@npm:^1.1.2, @medusajs/ui-preset@npm:latest":
+"@medusajs/icons@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@medusajs/icons@npm:1.2.1"
+  peerDependencies:
+    react: ^16.x || ^17.x || ^18.x
+  checksum: bdda0af295d5cd83682b5689a8fc711a03639b7d4eb5aa2a6648e99af969363ec942dc7fe3cb21e27b6b70ea5a94a9e1b5e10b28f57ae4c7211a8807f84200c8
+  languageName: node
+  linkType: hard
+
+"@medusajs/ui-preset@npm:^1.1.2":
   version: 1.1.2
   resolution: "@medusajs/ui-preset@npm:1.1.2"
   dependencies:
@@ -4349,6 +4358,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@medusajs/ui-preset@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "@medusajs/ui-preset@npm:1.1.3"
+  dependencies:
+    "@tailwindcss/forms": ^0.5.3
+    tailwindcss-animate: ^1.0.6
+  peerDependencies:
+    tailwindcss: ">=3.0.0"
+  checksum: 36b3cbe3d1b3ab2666abe84499dc19a57fe88e886704ca82b42105b5ba078638c6af8d2032d09da12d2324c485966ef2840f6a06192690b986b3c5f025308c68
+  languageName: node
+  linkType: hard
+
 "@medusajs/ui@npm:^2.4.1":
   version: 2.4.1
   resolution: "@medusajs/ui@npm:2.4.1"
@@ -4388,6 +4409,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@medusajs/ui@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@medusajs/ui@npm:3.0.0"
+  dependencies:
+    "@medusajs/icons": ^1.2.1
+    "@radix-ui/react-accordion": ^1.1.2
+    "@radix-ui/react-alert-dialog": ^1.0.4
+    "@radix-ui/react-avatar": ^1.0.3
+    "@radix-ui/react-checkbox": ^1.0.4
+    "@radix-ui/react-dialog": ^1.0.4
+    "@radix-ui/react-dropdown-menu": ^2.0.5
+    "@radix-ui/react-label": ^2.0.2
+    "@radix-ui/react-popover": ^1.0.6
+    "@radix-ui/react-portal": ^1.0.3
+    "@radix-ui/react-radio-group": ^1.1.3
+    "@radix-ui/react-scroll-area": ^1.0.4
+    "@radix-ui/react-select": ^2.0.0
+    "@radix-ui/react-slot": ^1.0.2
+    "@radix-ui/react-switch": ^1.0.3
+    "@radix-ui/react-tabs": ^1.0.4
+    "@radix-ui/react-tooltip": ^1.0.6
+    "@react-aria/datepicker": ^3.5.0
+    "@react-stately/datepicker": ^3.5.0
+    clsx: ^1.2.1
+    copy-to-clipboard: ^3.3.3
+    cva: 1.0.0-beta.1
+    date-fns: ^2.30.0
+    prism-react-renderer: ^2.0.6
+    prismjs: ^1.29.0
+    react-currency-input-field: ^3.6.11
+    react-day-picker: ^8.8.0
+    sonner: ^1.4.41
+    tailwind-merge: ^2.2.1
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 06d34783a4954f51ef3a5282e59cb3fd367f58d435739525a543af84213fc22c745f10849f0178fdf7c4e19bda3872a7e3ca628e1f4498ac03c95affa98b5266
+  languageName: node
+  linkType: hard
+
 "@next/bundle-analyzer@npm:^14.1.3":
   version: 14.1.3
   resolution: "@next/bundle-analyzer@npm:14.1.3"
@@ -21823,6 +21884,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonner@npm:^1.4.41":
+  version: 1.4.41
+  resolution: "sonner@npm:1.4.41"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 31467ecab0fcbd5161fb76d158c698841b524686f7f598eecbc2a58d76bc496b5d5242df4350e274575aa3df59428d3aacd534415c968b19fc309c192c443330
+  languageName: node
+  linkType: hard
+
 "sort-css-media-queries@npm:2.1.0":
   version: 2.1.0
   resolution: "sort-css-media-queries@npm:2.1.0"
@@ -23033,8 +23104,8 @@ __metadata:
   dependencies:
     "@faker-js/faker": ^8.0.2
     "@medusajs/icons": ^1.2.0
-    "@medusajs/ui": ^2.4.1
-    "@medusajs/ui-preset": latest
+    "@medusajs/ui": ^3.0.0
+    "@medusajs/ui-preset": ^1.1.3
     "@radix-ui/react-dialog": ^1.0.4
     "@radix-ui/react-scroll-area": ^1.0.4
     "@radix-ui/react-tabs": ^1.0.4