Sonner

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

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/sonner.tsx

Import from@viliha/vui-react/sonner

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

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-react/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.