goey-toast — Morphing toast notifications for React

v0.2.0

Morphing toast notifications for React. Organic blob animations, promise tracking, and full customization out of the box.

Design and test your toast in real time.

Documentation

Everything you need to add morphing toast notifications to your React app.

import { GoeyToaster, goeyToast } from 'goey-toast'

function App() {
  return (
    <>
      <GoeyToaster position="bottom-right" />
      <button onClick={() => goeyToast.success('Saved!')}>
        Save
      </button>
    </>
  )
}

Requires react, react-dom, and framer-motion as peer dependencies.

Install as a shadcn component with a single command. This adds a thin wrapper to your components/ui directory and auto-installs dependencies.

npx shadcn@latest add <https://goey-toast.vercel.app/r/goey-toaster.json>

Then use it in your layout:

import { GoeyToaster } from "@/components/ui/goey-toaster"
import { goeyToast } from "@/components/ui/goey-toaster"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoeyToaster />
      </body>
    </html>
  )
}

// Trigger from anywhere
goeyToast.success("Saved!")

goeyToast('Hello')                    // default (neutral)
goeyToast.success('Saved!')           // green
goeyToast.error('Failed')             // red
goeyToast.warning('Careful')          // yellow
goeyToast.info('FYI')                 // blue

Pass a string or any ReactNode as the description to expand the toast into a blob.

goeyToast.error('Payment failed', {
  description: 'Your card was declined.',
})

// Custom component as body
goeyToast.success('Deployed', {
  description: (
    <div>
      <strong>Production</strong>
      <span>main @ 3f8a2c1</span>
    </div>
  ),
})

goeyToast.info('Share link ready', {
  description: 'Your link has been generated.',
  action: {
    label: 'Copy to Clipboard',
    onClick: () => navigator.clipboard.writeText(url),
    successLabel: 'Copied!',   // optional morph-back
  },
})

Automatically transitions from loading to success/error when the promise resolves.

goeyToast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Changes saved',
  error: 'Something went wrong',
  description: {
    success: 'All changes have been synced.',
    error: 'Please try again later.',
  },
  action: {
    error: {
      label: 'Retry',
      onClick: () => retry(),
    },
  },
})

6 positions supported. Right-side positions auto-mirror the blob horizontally. Center positions use a symmetric morph where the body grows outward from the pill.

<GoeyToaster position="top-center" />