Components

Toast

In Progress

Transient feedback notifications. Slides in from the top-right corner and auto-dismisses after 4 seconds. Wrap your app in ToastProvider and trigger toasts anywhere via the useToast() hook.

Design system owned. Toast positioning, animation, and auto-dismiss timing are handled by ToastProvider. Pass a message and type to showToast() — don't render fixed-position notification divs manually.

Live demo

Variants (static)

Payment processed successfully.

Something went wrong. Please try again.

Your session will expire in 5 minutes.

A new version is available.

Changes saved.

Provider setup

Wrap your root layout with ToastProvider once. All child components can then call useToast().

// In your root layout or _appimport { ToastProvider } from "@mnee-ui/ui";export default function RootLayout({ children }) {  return (    <ToastProvider>      {children}    </ToastProvider>  );}

Usage

import { useToast } from "@mnee-ui/ui";function MyComponent() {  const { showToast } = useToast();  return (    <button onClick={() => showToast("Saved!", "success")}>      Save    </button>  );}

Import

import { Toast, ToastProvider, useToast } from "@mnee-ui/ui"

Toast props

Prop	Type	Default	Description
message	string	—	Notification text content
type	"success" \| "error" \| "warning" \| "info" \| "default"	"default"	Visual variant using semantic tokens
onClose	() => void	—	Called when the dismiss button is clicked
className	string	—	Layout utilities only (margin, padding, width)

showToast signature

Param	Type	Default	Description
message	string	—	The notification text
type	ToastType	"default"	Optional visual variant