✦Actividad recienteSe ha actualizado el proyecto.
HTML + CSSToasts

Toasts apilados

Cada notificación nueva cae encima de la pila mientras las anteriores se encogen detrás, con cuatro como máximo.

Ajustes

16px
1x

Código

<div class="uv-zstack"><button class="fire">Añadir notificación</button><div class="pile"><div class="toast"><i>✦</i><span><b>Actividad reciente</b><small>Se ha actualizado el proyecto.</small></span></div></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Toasts

Dónde usarlo

Para cuando los avisos llegan a ráfagas. Piensa en la pantalla de comandas de un restaurante lleno un viernes por la noche, o en el panel de una tienda online en plenas rebajas: cada pedido nuevo cae arriba y los anteriores se echan hacia atrás sin desaparecer. Notificaciones toast apiladas al estilo de las que popularizó Sonner en React.

La pila guarda las cuatro últimas y descarta la más antigua, así que no la uses para nada que no se pueda perder. Agrupa repeticiones: «3 pedidos nuevos» es mejor que tres tarjetas iguales. Y añade una forma de limpiarlas cuando pase el jaleo.