Sonner

Mount Toaster once near the root of your app, then call vue-sonner's toast() function from anywhere to show a toast — useful for confirmations, background task results, and non-blocking error messages.

<script setup lang="ts">
import { toast } from "vue-sonner";
import { Toaster } from "@/components/ui/sonner";
</script>

<template>
  <Toaster />
  <button @click="toast('Event has been created.')">Show toast</button>
</template>

Wraps vue-sonner's Toaster, mapping its icon slots to @lucide/vue icons and its CSS variables to this design system's theme tokens.