ToastKit UI — Toast & Notification Component Kit (HTML/CSS/JS)

ToastKit UI — Toast & Notification Component Kit

Toast notifications jo user ko pareshan nahi, guide karti hain. ToastKit UI is a lightweight, dependency-free toast & notification kit for any website — success, error, warning aur info toasts with slide-in animation, auto-dismiss timer, progress bar, action button aur 6 positions. Copy karo, paste karo, ho gaya.

A live playground is included — apna toast banao (type, title, message, position, timer), ek click me try karo, aur copy-paste snippet le lo.

Features

• 4 toast types — Success, error, warning aur info, har ek ka apna colour aur icon.
• 6 positions — Top/bottom × left/center/right; toast jahan chahiye wahan dikhao.
• Auto-dismiss + progress bar — 3–10 second timer, progress bar dikhata hai kab toast gayab hoga.
• Action button — Undo / Retry jaisa ek action button har toast me, callback ke saath.
• Stacking + limit — Ek saath kai toasts, max 4; purana toast khud hat jata hai.
• XSS-safe — Title aur message textContent se render hote hain, HTML inject nahi hota.

What's Inside

• index.html — Live showcase + playground (try all 4 types, build your own toast)
• toast.css — All toast + showcase styles
• toast.js — ToastKit library (drop-in) + showcase wiring
• README.txt — Setup + usage guide

How to Use

1. Copy toast.css aur toast.js into your project.
2. Include them in your HTML, aur ek .toast-zone container add karo.
3. Call ToastKit.show({ type: 'success', title: '...', message: '...', duration: 5000, position: 'top-right' }) — bas.

Requirements

Any modern browser. No build step, no framework, no server needed — index.html directly kholo ya kisi static host par serve karo.

Need a Custom Website or Mobile App?

Downloading free code is just the start. Yadu Tech builds complete websites and mobile apps for businesses — design, development, deployment, all done for you.

👉 Chat on WhatsApp