toast
Show short messages like "Saved" or "Could not send" from anywhere in your app, even outside React.
What it is
@kitr/toast shows short messages that pop up and go away on their own: "Invoice saved", "Could not send". Call toast() from a component, an event handler or any plain module.
Runs in the browser. Outside a browser, or before the app has booted, every call goes to the console, so a package can call toast without depending on a UI.
Install
kitr add toastFirst time? Run npm i -g kitr once. Inside a project, the global kitr runs your project's own version.
Adds @kitr/toast, its provider and config/toast.ts. Adds react first if missing. Every change.
Quick start
// app/components/save-button.tsx
import { toast } from '@kitr/toast'
export function SaveButton() {
return (
<button type="button" onClick={() => toast.success('Invoice saved')}>
Save
</button>
)
}Click it and a green "Invoice saved" slides in at the bottom right, then fades out after four seconds. You don't mount anything: the provider does. Next in the guide: Show a toast.
Built on
| Built on | Role |
|---|---|
| sonner | Draws the toasts. |
kitr adds the provider that mounts the toaster, a toast you can call before React has rendered, toastError for caught errors, and dark mode that follows theme.
Problems it solves
- A different toast library in every project. Show a toast.
- Toasts only from inside components. Show toasts outside React.
- The same try/catch toast everywhere. Show an error.