NinA AI Agency
NL
All elements

Freebies · UI library

Toast stack

New toasts slide to the front, older ones stack neatly behind and fan out on hover.

PressFree

Betaling mislukt

Probeer een andere kaart.

Kai doet mee

Kai kan nu meelezen en reageren.

offerte.pdf geüpload

Opgeslagen in Klanten.

Works inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.

Build an interactive UI element: Toast stack.

What it is: New toasts slide to the front, older ones stack neatly behind and fan out on hover.

Behaviour:
- A "Show toast" button adds a toast (title, short text, coloured dot).
- The newest toast is in front; older ones stack compactly behind, each 12 px higher and 5% smaller, three visible at most.
- Hovering the stack fans it out into a list; moving away collapses it again.
- Each toast disappears after 5 seconds; aria-live for screen readers.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.

Keep playing