1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capastoastfeedbackstack

Stacked Toast Center

Contenedor de notificaciones toast apilables en la esquina con auto-cierre temporizado.

✓ Profile updated!
✕ Failed to sync changes.

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { ToastStackOverlay } from 'react-component-kit-ui/overlays';

<ToastStackOverlay>Content</ToastStackOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/ToastStackOverlay.tsx + ToastStackOverlay.css:

ToastStackOverlay.tsx
'use client';

import './ToastStackOverlay.css';

/** ToastStackOverlay — ported from astro-component-kit. */
export interface ToastStackOverlayProps {
}

export function ToastStackOverlay({}: ToastStackOverlayProps) {
  return (
    <>
      <div className="toast-stack" data-rk-e22de0="">
        <div className="toast-mini success" data-rk-e22de0="">Profile updated!</div>
        <div className="toast-mini error" data-rk-e22de0="">Failed to sync changes.</div>
      </div>
    </>
  );
}

export default ToastStackOverlay;
ToastStackOverlay.css
/* ToastStackOverlay — ported from astro-component-kit (overlays/ToastStackOverlay.astro) */

.toast-stack:where([data-rk-e22de0]) { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; }
.toast-mini:where([data-rk-e22de0]) { background: #111; color: #fff; padding: 0.75rem 1.5rem; border-radius: 10px; border-left: 4px solid #333; font-size: 0.85rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); }
.success:where([data-rk-e22de0]) { border-left-color: #10b981; }
.error:where([data-rk-e22de0]) { border-left-color: #ef4444; }

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
ToastStackOverlay.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
toastfeedbackstack