Components

Toast

Fire a toast from anywhere — components, event handlers, async code.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add toast

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { toast, Toaster } from "@lumora/ui/components/toast";
// or from the barrel:
import { toast, Toaster } from "@lumora/ui";

Props worth knowing

Mount Toaster once near the app root — it portals to document.body and stacks toasts bottom-right. Call toast({ title, description?, variant?, action?, duration? }) from anywhere; it returns an id for toast.dismiss(id). Hovering a toast pauses its auto-dismiss timer. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.