# Sonner shadcn sonner reskinned for UI95. Source: https://www.ui95.dev/components/sonner ## Examples ```tsx import { toast } from "sonner" import { Button } from "@/components/ui/button" import { Toaster } from "@/components/ui/sonner" import type { ShowcaseDemo } from "../types" const TOASTS: readonly { label: string; fire: () => void }[] = [ { label: "default", fire: () => toast("Disk inserted", { description: "A:\\ is ready." }) }, { label: "success", fire: () => toast.success("Saved to floppy") }, { label: "info", fire: () => toast.info("You have 1 new fax") }, { label: "warning", fire: () => toast.warning("Low disk space", { description: "312 KB free on C:\\" }) }, { label: "error", fire: () => toast.error("General protection fault") }, { label: "loading", fire: () => toast.loading("Defragmenting...") }, { label: "action", fire: () => toast("File deleted", { action: { label: "Undo", onClick: () => toast.success("File restored") }, cancel: { label: "OK", onClick: () => {} }, }), }, ] export const demo: ShowcaseDemo = { span: "wide", variants: TOASTS.map(({ label, fire }, index) => ({ label, render: () => ( <> {index === 0 && } ), })), } ``` ## Installation ```bash npx shadcn@latest add https://www.ui95.dev/r/sonner.json ``` Run it in a Radix shadcn project that already has the UI95 theme. Dependencies: ```bash npm install next-themes sonner ``` Add these items first: - [pixel-glyphs](https://www.ui95.dev/components/pixel-glyphs) - [spinner](https://www.ui95.dev/components/spinner) `components/ui/sonner.tsx` ```tsx "use client" import { useTheme } from "next-themes" import { Toaster as Sonner, type ToasterProps } from "sonner" import { AlertGlyph, CheckGlyph, CloseGlyph, InfoGlyph } from "@/components/ui/pixel-glyphs" import { Spinner } from "@/components/ui/spinner" const Toaster = ({ ...props }: ToasterProps) => { const { theme = "system" } = useTheme() return ( ), info: ( ), warning: ( ), error: ( ), loading: ( ), }} toastOptions={{ unstyled: true, classNames: { toast: "flex w-(--width) items-start gap-3 pixel-border border-border bg-popover p-3 text-popover-foreground offset-shadow-2", icon: "relative mt-0.5 flex size-4 shrink-0 items-center justify-center", content: "flex min-w-0 flex-1 flex-col gap-1", title: "font-pixel text-[16px] leading-none uppercase", description: "text-lg leading-tight", actionButton: "h-8 shrink-0 pixel-border border-border bg-primary px-2.5 font-pixel text-[16px] leading-none text-primary-foreground uppercase bevel-raised", cancelButton: "h-8 shrink-0 pixel-border border-border bg-secondary px-2.5 font-pixel text-[16px] leading-none text-secondary-foreground uppercase bevel-raised", closeButton: "absolute top-1 right-1 flex size-6 items-center justify-center text-popover-foreground", error: "border-destructive", }, }} {...props} /> ) } export { Toaster } ``` ## API reference ### Toaster No props of its own. It forwards the props of the element or primitive it wraps.

Examples

Installation

API reference

Toaster

Uses