Toast
The classic toast API — a thin re-export of Sonner (same underlying Morphos ToastProvider).
Installation
npx kosmesis add toastpnpm dlx kosmesis add toastyarn dlx kosmesis add toastbunx kosmesis add toastThis component builds on other Kosmesis components — install these first (via kosmesis add or this same manual process on their own pages): sonner.
Copy and paste the following code into your project.
/** * shadcn/ui documents `Toast` (the older, lower-level API) and `Sonner` (the modern recommended * one) separately, because upstream they're backed by two different libraries (Radix Toast vs. * the standalone `sonner` package). Morphos has a single `ToastProvider`/`Toast` primitive behind * both concepts, so Kosmesis's `Toast` page is this thin re-export of `Sonner` — use `Toaster` + * the `toast()` helper from either import path, they're the same implementation. */export { Toaster, toast, type ToasterProps } from "./sonner";Install the following dependencies:
npm install @praxisjs/csspnpm add @praxisjs/cssyarn add @praxisjs/cssbun add @praxisjs/cssThis component builds on other Kosmesis components — install these first (via kosmesis add or this same manual process on their own pages): sonner.
Copy and paste the following code into your project.
/** * shadcn/ui documents `Toast` (the older, lower-level API) and `Sonner` (the modern recommended * one) separately, because upstream they're backed by two different libraries (Radix Toast vs. * the standalone `sonner` package). Morphos has a single `ToastProvider`/`Toast` primitive behind * both concepts, so Kosmesis's `Toast` page is this thin re-export of `Sonner` — use `Toaster` + * the `toast()` helper from either import path, they're the same implementation. */export { Toaster, toast, type ToasterProps } from "./sonner";Examples
shadcn/ui documents Toast (older, Radix-backed) and Sonner (modern, standalone-package-backed)
separately, because upstream they're genuinely different libraries. Morphos has a single
ToastProvider/Toast primitive behind both concepts, so this page — and its registry entry —
is a plain re-export of Sonner. Use whichever import path you prefer;
they're the same Toaster and toast().
import { Toaster, toast } from "@/components/ui/toast";
// identical to:
import { Toaster, toast } from "@/components/ui/sonner";