ToastStack

toaststack-1779393692675.tsx

'use client'
import { useState, useCallback } from 'react'

export default function ToastStack() {
  const [toasts, setToasts] = useState([
    { id: 1, message: 'Component saved!', type: 'success' },
    { id: 2, message: 'Update available', type: 'info' },
  ])
  const dismiss = (id) => setToasts(t => t.filter(x => x.id !== id))
  const colors = { success: '#10b981', error: '#ef4444', info: '#3b82f6', warning: '#f59e0b' }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '360px' }}>
      {toasts.map(toast => (
        <div key={toast.id} style={{
          display: 'flex', alignItems: 'center', gap: '12px',
          background: '#1e1e2e', color: '#fff', borderRadius: '10px',
          padding: '14px 16px', boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
          borderLeft: '4px solid ' + (colors[toast.type] || '#6366f1'),
          animation: 'slideIn 0.3s ease',
        }}>
          <style>{'@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}'}</style>
          <span style={{ flex: 1, fontSize: '14px' }}>{toast.message}</span>
          <button onClick={() => dismiss(toast.id)} style={{
            background: 'none', border: 'none', color: '#888', cursor: 'pointer', fontSize: '18px'
          }}>×</button>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryNotifications

Frameworkreact

TierFREE

Copies0

About

Stackable toast notification system with auto-dismiss

More from Notifications

'use client'
import { useState, useCallback } from 'react'

type ToastType = 'success' | 'error' | 'warning' | 'info'

interface Toast {
  id: number
  type: ToastType
  title: string
  message?: string
}

const CONFIGS = {
  success: { icon: '✓', co

ToastStack

Notifications

'use client';
import { useState, useEffect } from 'react';

export default function PulseNotification() {
  const [open, setOpen] = useState(false);
  const [count, setCount] = useState(3);
  const [pulse, setPulse] = useState(true);
  const notifica

PulseNotification

Notifications

'use client'
import { useState } from 'react'

const NOTIFS = [
  { id:1, title:'New comment on your post', body:'Alice replied to your dashboard query', icon:'💬', read:false, time:'2m' },
  { id:2, title:'Payment received', body:'You received $299

NotificationCenter

Notifications