Overlays toastfeedbackstack

Stacked Toast Center

Container for multiple toasts appearing simultaneously.

✓ Profile updated!
✕ Failed to sync changes.

Usage

Copy the full block below to use this component with its imports.

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

<ToastStackOverlay>Content</ToastStackOverlay>
--- import { StackedToastCenter } from 'astro-component-kit'; --- <ToastStackOverlay>Content</ToastStackOverlay>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/StackedToastCenter.astro and paste the following code:

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>

Quick Info

Category
Overlays
Filename
StackedToastCenter.astro
Dependencies
None — pure Astro + CSS
Tags
toastfeedbackstack