1 GitHub star = 1 new component.

Star the repo
Overlaystoastfeedbackstack

Stacked Toast Center

Stacking toast container in the viewport corner.

โœ“ Profile updated!
โœ• Failed to sync changes.

Usage

Copy and paste this code into your React component:

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

<ToastStackOverlay>Content</ToastStackOverlay>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Overlays
Filename
ToastStackOverlay.tsx
Dependencies
None โ€” pure React + CSS
Tags
toastfeedbackstack