Sonner notifications with the original SystemToast appearance.
Preview
Usage
Mount one Toaster in your application, then call the exported toast(title,{description}). The primary example contains its own host for copying into a standalone page. Avoid a second host if your application already mounts one. No theme provider or demo portal helper is required.
Composition
Defaults are position="top-right", offset=0, gap=0, visibleToasts=5, richColors=false and expand=true. Unsupported richColors=true or expand=false throw. Actions, dismiss controls, rich HTML, alternate placement and library timers/swiping are web adaptations beyond the retained native SystemToast frames.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
import { createPortal } from "react-dom";
import { Toaster as Sonner } from "sonner";
import type { ToasterProps as SonnerProps } from "sonner";
import { Button, buttonVariants } from "./button";
import { minecraftGlyphs } from "./minecraft-font";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import { playMinecraftClick } from "./minecraft-sound";
import { MinecraftToastBackdrop } from "./minecraft-toast-backdrop";Interactive playground
For the inherited interaction contract, see Sonner. The restrictions above describe the installed Grasscn implementation.