ComponentsFeedback
Toast
Transient notifications powered by Sonner.
Overview
A toast is a brief, transient notification. Morpha uses
Sonner: call toast() from anywhere, with a
single <Toaster /> mounted once at the app root.
$ npx morpha-ui add sonnerExamples
With action
Success and error
Installation
Toasts use Sonner. Morpha UI distributes it via the Morpha CLI (coming in a
later step): npx morpha-ui add sonner. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add sonnerMount the <Toaster /> once in your root layout so toast() calls have somewhere to render:
import { Toaster } from '@/components/ui/sonner';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
);
}API Reference
The table documents the <Toaster /> props. Individual toasts are created
imperatively via toast(), toast.success(), toast.error(), and friends.
Prop
Type
Accessibility
- Sonner announces toasts through an ARIA live region.
- Keep messages concise and self-contained.
- Any toast action must be reachable and operable from the keyboard.