Use Sonner V4

[FilipBrannlund]

I'm having difficult finding documentation of how to use the sonner component with v4 changes.

I'm using this component:
https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/sonner.tsx

"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          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",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }

And found a file sonner-demo.tsx file
https://github.com/shadcn-ui/ui/blob/main/apps/v4/components/sonner-demo.tsx

"use client"

import { toast } from "sonner"

import { Button } from "@/registry/new-york-v4/ui/button"

export function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}

But the sonner-demo file does not use Toaster exported from sonner component.

[mahoneyj02]

I'm not sure if this helps, but the Toaster component is imported and used in the root layout component (https://github.com/shadcn-ui/ui/blob/main/apps/v4/app/layout.tsx)