MarovStudio
Back to marketplace

Toast Stack

Toast notifications in three tones

Overlaystoastnotificationalertaria-livestack
FullscreenCreate free account

Trigger a toast above.

Code locked
"use client";

import { AlertCircle, Check, Info, X } from "lucide-react";
import { useRef, useState } from "react";

type Toast = { id: number; tone: "success" | "info" | "error"; text: string };

const TONES = {

Sign in to see the code

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free accountSign in

Free — no card required.

Related components

Delete this project?

This cannot be undone. Everything inside it goes with it.

Modal Dialog

Overlays · Modal built on the browser native dialog element

Keyboard focus shows it tooKeyboard focus shows it too

Tooltip

Overlays · Tooltip on hover and on keyboard focus

Dropdown Menu

Overlays · Menu that closes on outside click and Escape