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.

How to Update

Run the following command in your project:

• npm
• Yarn
• pnpm

npm install @medusajs/ui@3.0.0

yarn add @medusajs/ui@3.0.0

pnpm add @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:

• Before
• After

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>
    </>
  )
}

import { Button, Toaster, toast } from "@medusajs/ui"

export default function ToasterDemo() {
  return (
    <>
      <Toaster />
      <Button
        onClick={() =>
          toast.info("Info", {
            description: "Hello there",
          })
        }
      >
        Show
      </Button>
    </>
  )
}

Learn more about the toast utility in the UI documentation.

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:

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.