Sonner

Toast notifications provided by Sonner.

Examples

A short notification appears after selection.

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Sonner

pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/sonner.json'

Usage

A complete example using the installed component and hook paths.

Sonner usage

"use client";type PreviewProps = { interactive?: boolean };import { toast as sonnerToast } from "sonner";import { Button } from "@/components/ui/button";import { Toaster as SonnerToaster } from "@/components/ui/sonner";function SonnerPreview({ interactive = false }: PreviewProps) {  return (    <div className="space-y-2">      <Button        variant="outline"        onClick={() =>          sonnerToast("Sample notification", {            description: "Shown in this example.",          })        }      >        Show notification      </Button>      <p className="text-xs text-muted-foreground">A short notification appears after selection.</p>      {interactive ? <SonnerToaster position="bottom-right" /> : null}    </div>  );}export default function Demo() {  return <SonnerPreview interactive />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Toaster

Toaster props

ToasterProps

Source