// toast

Toast

Glass-styled sonner. Toasts move constantly, so they skip the displacement engine by design.

// install

npx shadcn add @vsrc/toast

Props

Only the vsrc surface is documented here. Everything else passes through to the underlying element.

// toast()

prop	type	default	notes
(sonner API)	toast(message, options)	—	The full sonner API — this component styles the Toaster; it does not wrap the call.

Optics

CSS material only — backdrop-blur, tint, and rim, but NO displacement map. Toasts translate constantly while stacking and dismissing; a per-frame map regeneration would cost more than the effect is worth. This is the registry's precedent for every position-animating surface.

Accessibility

sonner announces toasts via a live region; hover pauses the dismiss timer.
Respects reduced motion via sonner's own handling.

Source

The exact file the CLI copies into your project — you own it after install.

// registry/vsrc/ui/toast.tsx

"use client";

import { Toaster as Sonner, toast } from "sonner";

import { glassMaterial } from "@/registry/vsrc/ui/glass-surface";
import { cn } from "@/lib/utils";

/**
 * Glass-styled sonner. Toasts animate position constantly, so they get the
 * CSS material only — no per-toast displacement maps (PLAN perf guardrail).
 */
function Toaster(props: React.ComponentProps<typeof Sonner>) {
  return (
    <Sonner
      className="toaster group"
      toastOptions={{
        unstyled: true,
        classNames: {
          toast: cn(
            glassMaterial,
            "rounded-(--glass-radius) backdrop-blur-md flex w-full items-center gap-3 p-4",
            "text-sm text-foreground",
          ),
          title: "font-medium",
          description: "text-muted-foreground",
          actionButton: "ml-auto rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground",
        },
      }}
      {...props}
    />
  );
}

export { Toaster, toast };