goey-toast

You can install a thin wrapper component at components/ui/goey-toaster.tsx using the shadcn CLI. This command automatically installs goey-toast and framer-motion as dependencies.

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

For projects using shadcn/ui, you can use the shadcn CLI to automatically install a wrapper component at components/ui/goey-toaster.tsx and handle necessary dependencies:

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

Ensure you have the following peer dependencies installed in your project:

Install them using:

npm install react react-dom framer-motion

Install the core package using npm:

npm install goey-toast

To use goey-toast, you must complete two required steps:

1. Mount <GooeyToaster /> once: Place this component near your application root.
2. Import the stylesheet: You must import goey-toast/styles.css at your application entry point. Failure to do this will result in unstyled toasts.

Note: While aliases like GoeyToaster and goeyToast exist for backward compatibility with v0.2.x, you should use the double-o versions (GooeyToaster, gooeyToast) in all new code.

import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css' // REQUIRED — import once at app entry

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

To help AI coding agents (like Claude Code or Cursor) understand how to use goey-toast correctly, you can install a bundled Agent Skill. This provides the agent with knowledge about the <GooeyToaster /> mount, the required CSS import, and the full API.

Install from the skills.sh registry:

npx skills add anl331/goey-toast

Alternatively, you can copy the skill directly into your project using the goey-toast CLI:

• To .claude/skills/goey-toast/SKILL.md: npx goey-toast add-skill
• To include an AGENTS.md pointer: npx goey-toast add-skill --agents
• To .cursor/skills/goey-toast: npx goey-toast add-skill --dir .cursor/skills/goey-toast

To get started, mount the <GooeyToaster /> component in your app and use the gooeyToast object to trigger notifications.

1. Import GooeyToaster, gooeyToast, and the required CSS.
2. Add <GooeyToaster /> to your component tree (e.g., in App.tsx).
3. Call gooeyToast methods (like .success()) to show toasts.

import { GooeyToaster, gooeyToast } from 'goey-toast'
import 'goey-toast/styles.css'

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

You must import the goey-toast stylesheet in your application's entry point (e.g., main.tsx or App.tsx) for the components to render correctly. Without this import, toasts will appear unstyled.

import 'goey-toast/styles.css'

Install the package along with its required peer dependencies (react, react-dom, and framer-motion) using npm:

npm install goey-toast react react-dom framer-motion

Peer Dependencies Requirements:

• react: >= 18.0.0
• react-dom: >= 18.0.0
• framer-motion: >= 10.0.0

You can control the 'gooey' feel of the toast using preset, spring, and bounce props.

• preset: Uses a predefined animation configuration (e.g., from animationPresets).
• spring: A boolean to enable/disable spring-based physics animations.
• bounce: A numeric value (typically 0.0 to 0.8) to control the bounciness of the spring. A value of 0.0 is heavily damped (subtle), while 0.8 is very bouncy (dramatic).