Toast Stack
Overview
New notifications land on top while older ones shrink back; hover to expand them into a list. Each dismisses itself after 4 seconds.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Toast Stack to your project in your colors.
Where to use it
Notifications, hints, loading and status feedback, so people know whether an action worked.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add toast-stack
mcp › Use 8pt MCP to call get_component("toast-stack")
Code
Source for Toast Stack. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-toast"> <button class="x-toast__btn" type="button">Send notification</button> <ol class="x-toast__stack" aria-live="polite"></ol> </div>
.x-toast{position:relative;width:100%;height:100%;min-height:220px;display:grid;place-items:center}
.x-toast__btn{border:1px solid var(--d-line,rgba(255,255,255,.12));background:var(--d-card,#101016);color:var(--d-fg,#fff);border-radius:10px;padding:10px 16px;font:600 13px/1 var(--d-font,system-ui,sans-serif);cursor:pointer;transition:transform .2s}
.x-toast__btn:active{transform:scale(.96)}
.x-toast__stack{position:absolute;right:16px;bottom:16px;width:min(280px,calc(100% - 32px));height:64px;margin:0;padding:0;list-style:none}
.x-toast__stack li{position:absolute;inset:auto 0 0 0;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--d-card,#101016);border:1px solid var(--d-line,rgba(255,255,255,.12));box-shadow:0 12px 30px -12px rgba(0,0,0,.5);color:var(--d-fg,#fff);font:13px/1.35 var(--d-font,system-ui,sans-serif);transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .35s;will-change:transform}
.x-toast__stack li i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--d-accent,#4D74FF)}
.x-toast__stack li small{display:block;color:var(--d-muted,#a0a0ab);font-size:12px}const init = (root) => {
const stack = root.querySelector('.x-toast__stack');
const msgs = [['Prompt copied', 'Just paste it into your editor'], ['Component saved', 'Added to the Landing page list'], ['Installed', 'spotlight-card written to the project'], ['Theme switched', 'Dark']];
let n = 0, hover = false;
const layout = () => {
const items = [...stack.children].reverse();
items.forEach((li, i) => {
const y = hover ? -i * 64 : -i * 10, s = hover ? 1 : 1 - i * 0.05;
li.style.transform = `translateY(${y}px) scale(${s})`; li.style.opacity = i > 2 && !hover ? 0 : 1; li.style.zIndex = 10 - i;
});
};
const push = () => {
…Subscribe to Builder to see the full source.See pricing