Neumorphism UI

Toast

Use Toast for temporary feedback after an action while letting people continue their work.

Preview

Results and undo

Try local success and error messages, archive a draft with undo, and compare a timed notification.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/toast

Install the shared base once, then add components and their dependencies with the CLI.

Results and undo

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/toast
Registry JSON

Usage

Mount ToastProvider and Toaster, then call useToast from a descendant to add notifications. Provide a readable title and choose a timeout or undo action that suits the message.

"use client";

import { Button } from "@/components/ui/button";
import { Toaster, ToastProvider, useToast } from "@/components/ui/toast";

function NotifyButton() {
  const toast = useToast();
  return <Button onClick={() => toast.add({ title: "Changes saved", type: "success" })}>Show notification</Button>;
}

export default function Example() {
  return <ToastProvider><NotifyButton /><Toaster /></ToastProvider>;
}

API Reference

Uses the existing Base UI Toast lifecycle and accessibility behavior. The local example shows success, error, undo and timed dismissal without claiming server persistence.

ComponentPropTypeDefaultDescription
ToastProvidertimeout / limit / toastManagernumber / ToastManager—Lifetime, visible limit and an optional external manager. timeout 0 disables automatic dismissal.
useToastadd / close / update / promiseBase UI toast manager methods—Create, close, update and track asynchronous toast states.
Toasterlabel / closeLabelstring—Accessible names for the notification region and close buttons.

Accessibility

  • 01

    F6 enters the notification region. Communicate results through titles and descriptions, not color alone.

  • 02

    Keep critical recovery actions available outside transient messages. The example keeps notifications open for inspection unless a timeout is explicitly set.