A toast component for React. Dark card, stacking, progress ring, hover-to-expand, and auto-dismiss.
npm install toast-stack// layout.tsx
import 'toast-stack/styles.css'
import { Toaster } from 'toast-stack'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Toaster />
</body>
</html>
)
}// my-component.tsx
'use client'
import { toast } from 'toast-stack'
export default function MyComponent() {
return (
<button onClick={() => toast('Event has been created')}>
Show toast
</button>
)
}toast('Default toast')
toast.success('Event has been created')
toast.error('Event has not been created')
toast.warning('Storage is almost full')
toast.info('Update available')aaezekiel.co/notes/toast-stack
MIT