라이브 데모 및 문서

특징

• 유기적 블롭 모프 애니메이션 (알약→ 블롭 → 알약)
• 다섯 가지 토스트 유형: 기본값, 성공, 오류, 경고, 정보
• 성공/오류 전환 로딩이 포함된 약속 토스트→
• 선택 가능한 성공 라벨 모프백이 있는 액션 버튼
• 문자열과 React 컴포넌트를 지원하는 설명 바디
• 설정 가능한 디스플레이 시간 및 반사 강도
• 맞춤 채우기 색상, 테두리 색상, 테두리 폭
• classNames 프로펠러를 통한 CSS 클래스 오버라이드
• 오른쪽 위치용 자동 수평 미러링 6개 위치
• 대칭 모프 애니메이션이 있는 중심 위치
• 호버 일시정지: 확장된 토스트를 떠올리면 종료 타이머를 일시정지합니다
• 호버 리엑스팬드: 접힌 알약을 떠올리면 토스트가 다시 확장됩니다
• 사전 해산 붕괴 애니메이션
• [[T1]를 통한 현장 토스트 업데이트
• 타입별 필터별 무시: gooeyToast.dismiss({ type: 'error' })
• 다크 모드 및 RTL 레이아웃 지원
• 애니메이션 프리셋: 부드럽고, 탄력 있고, 미묘하며, 날카롭습니다
• 확장 건배 시 타임스탬프 표시와 선택적 showTimestamp 토글 기능
• 위치 설정 가능한 닫기 버튼 (top-left / top-right)
• 호버 정지 및 재확장 기능이 있는 카운트다운 진행 바

gooey-toast

Live Demo & Docs

Features

• Organic blob morph animation (pill → blob → pill)
• Five toast types: default, success, error, warning, info
• Promise toasts with loading → success/error transitions
• Action buttons with optional success label morph-back
• Description body supporting strings and React components
• Configurable display duration and bounce intensity
• Custom fill color, border color, and border width
• CSS class overrides via classNames prop
• 6 positions with automatic horizontal mirroring for right-side positions
• Center positions with symmetric morph animation
• Hover pause: hovering an expanded toast pauses the dismiss timer
• Hover re-expand: hovering a collapsed pill re-expands the toast
• Pre-dismiss collapse animation
• In-place toast updates via gooeyToast.update()
• Dismiss by type filter: gooeyToast.dismiss({ type: 'error' })
• Dark mode and RTL layout support
• Animation presets: smooth, bouncy, subtle, snappy
• Timestamp display on expanded toasts with optional showTimestamp toggle
• Close button with configurable position (top-left / top-right)
• Countdown progress bar with hover-pause and re-expand
• Keyboard dismiss (Escape) and swipe-to-dismiss on mobile
• Toast queue with configurable overflow strategy
• Dismiss callbacks: onDismiss and onAutoClose

Installation

npm install goey-toast

shadcn/ui

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

This installs a thin wrapper component at components/ui/goey-toaster.tsx and auto-installs the goey-toast and framer-motion packages.

AI Agents (Skill)

goey-toast ships a bundled Agent Skill (SKILL.md) so coding agents (Claude Code, Cursor, etc.) know how to install and use it correctly — the required `` mount, the styles.css import, and the full API.

Install from the skills.sh registry:

npx skills add anl331/goey-toast

Or copy the skill into your project from the package itself:

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

Peer Dependencies

goey-toast requires the following peer dependencies:

npm install react react-dom framer-motion

CSS Import (Required)

You must import the goey-toast stylesheet for the component to render correctly:

import 'goey-toast/styles.css'

Add this import once in your app’s entry point (e.g., main.tsx or App.tsx). Without it, toasts will appear unstyled.

Quick Start