Toast

A short message that slides into the bottom-right corner and leaves on its own. It wears Alert's look, lifted by an outline.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/toast

Examples

Two messages, one with an action

toast-basic.tsx

import { Button } from "@/components/zero/button";import { ToastProvider, useToast } from "@/components/zero/toast";function TakeJob() {  const toast = useToast();  return (    <div className="flex flex-wrap gap-3">      <Button        onClick={() =>          toast.add({            type: "success",            title: "Job taken",            description: "Reach the north gate before 22:00.",          })        }      >        Take the job      </Button>      <Button        variant="secondary"        onClick={() =>          toast.add({            type: "warning",            title: "Low on fuel",            description: "Refuel before you take the next job.",            actionProps: { children: "Find a pump" },          })        }      >        Check the tank      </Button>    </div>  );}export default function ToastBasic() {  return (    <ToastProvider>      <TakeJob />    </ToastProvider>  );}

Behaviour

Wrap the app in ToastProvider once; anywhere inside, useToast().add({ title, description, type }) shows one. type is one of Alert's tones, and actionProps adds a button.

Each leaves after five seconds, held while pointed at or focused. Swipe it right or press its close button to send it away early; the rest close the gap. Three show at once, newest nearest the corner; more wait their turn. They are announced politely as they arrive.

Props

ToastProvider

Prop	Type	Default	Description
timeout	number	5000	Milliseconds before a toast leaves; 0 keeps it.
limit	number	3	How many show at once.

Also takes every prop of Base UI's Toast.Provider.

useToast

Prop	Type	Default	Description
add	(options) => string	—	Shows a toast: title, description, type, timeout, actionProps. Returns its id.
close	(id?) => void	—	Closes one toast, or all of them.
update	(id, options) => void	—	Changes a toast that is showing.
promise	(promise, options) => Promise	—	A toast that follows a promise from loading to success or error.

Also takes every prop of Base UI's useToastManager.