npm

Sonner

Sonner is a toast notification system for React, an alternative to the built-in toast.

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/sonner.

Usage

Mount <Toaster /> once in your root layout, then call toast() (from sonner) anywhere.

sonner-demo.tsx
// Mount once in your root layout:
import { Toaster } from "@viliha/vui-ui/sonner";

<Toaster />

// Trigger from anywhere:
import { toast } from "sonner";

toast.success("Event has been created");

Theme

VUI's Toaster follows the .dark class on <html>; no next-themes needed.