1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas toastfeedbackstack

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 página de Astro:

astro 
---
import { StackedToastCenter } from 'astro-component-kit';
---

<ToastStackOverlay>Content</ToastStackOverlay>
--- import { StackedToastCenter } from 'astro-component-kit'; --- <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/lib/StackedToastCenter.astro:

astro 
---
---
<div class="toast-stack">
  <div class="toast-mini success">Profile updated!</div>
  <div class="toast-mini error">Failed to sync changes.</div>
</div>
<style>
  .toast-stack { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; }
  .toast-mini { 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 { border-left-color: #10b981; }
  .error { border-left-color: #ef4444; }
</style>
--- --- <div class="toast-stack"> <div class="toast-mini success">Profile updated!</div> <div class="toast-mini error">Failed to sync changes.</div> </div> <style> .toast-stack { position: fixed; top: 2rem; right: 2rem; z-index: 5000; display: flex; flex-direction: column; gap: 0.75rem; } .toast-mini { 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 { border-left-color: #10b981; } .error { border-left-color: #ef4444; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
StackedToastCenter.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
toastfeedbackstack