v0.2.0

Notifications that morph beautifully

A notch-style toast system for React with smooth morphing, promise states, and edge-attached or floating placement

pnpm i notch-toast

GitHub

Read the docs

Examples

Click to preview

Toast types

Promise (Morph Animation)

Behavior checks

Promise examples morph from a loader into their final state. Every toast dismisses after the selected duration.

Builder

Position

Display mode

Animation preset

Fluid is the default. Gooey is intentionally expressive; smooth, subtle, and snappy refine the same motion system.

Title

Display duration

3.6

Close button

Let people dismiss this toast with the cross button or the Escape key.

Generated code

<NotchToaster
  position="top-center"
  mode="attached"
  animation="fluid"
/>

toast.success.("Toast rendered successfully", {
  duration: 3600,
  dismissible: false,
})

shadcn/ui

Add a thin, local wrapper in components/ui with one command. It installs notch-toast and Motion while keeping your app's public API in your own source tree.

Terminal

npx shadcn@latest add https://notch.devsethi.me/r/notch-toaster.json

Import NotchToaster and notchToast from @/components/ui/notch-toaster, mount one toaster in your layout, and trigger it from client components.

AI agents & skills

Give your coding agent the correct mount, API, and dismissible toast guidance before it writes its first notification.

Terminal

npx skills add Devsethi3/notch-toast

Or install the bundled skill directly from the package:

Terminal

npx notch-toast add-skill            # -> .claude/skills/notch-toast/SKILL.md
npx notch-toast add-skill --agents   # also adds an AGENTS.md pointer
npx notch-toast add-skill --dir .cursor/skills/notch-toast