Crème — Elegant Vanilla JS Toast & Notification Widget

Overview

Meet Crème — a refined, self-contained toast and notification widget crafted in pure vanilla JavaScript with zero dependencies. Its warm crème-and-amber palette breaks away from the sterile blue/grey notification libraries flooding the market and brings a tactile, bakery-warm aesthetic to any web project. Drop in one JS file, call a single function, and your UI gains polished, accessible toast notifications with queuing, progress bars, action buttons and five distinct variant styles.

Who It's For

• Frontend developers who want a plug-and-play notification system without pulling in a full framework
• TypeScript/JavaScript developers building vanilla or lightly-tooled web apps
• Agencies and freelancers looking for a branded UI component they can drop into client projects
• Side-project builders who want something that looks different from every other toast library

Key Features In Depth

Crème ships five toast variants — success, error, warning, info and neutral — each with its own icon and colour tone drawn from a carefully curated warm palette. Toasts stack vertically in one of six configurable positions (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right) and queue gracefully when the visible limit is reached. A countdown progress bar sweeps across the bottom of each toast so users always know how long the message will persist. Every toast supports an optional action button — perfect for "Undo", "Retry" or "View" interactions — and an optional persistent mode for critical messages that won't auto-dismiss. Dismiss animations use CSS keyframes for silky 60 fps performance with no layout jitter.

What's Included

• index.html — fully styled interactive demo page showcasing every variant, position and option
• creme-toast.js — the self-contained widget (no dependencies, ~130 lines)
• README.md — integration guide, API reference and customisation tips

How to Customise / Get Started

Integration takes under two minutes: add a single <script> tag for creme-toast.js, then call CremeToast.show({ message: 'Hello!', type: 'success' }). Override the eight CSS custom properties at the top of the widget file to swap the colour palette entirely — change --ct-bg, --ct-accent and friends to match your brand in seconds. Adjust duration, position, maxVisible and action per call for full per-toast control. No build step, no npm install, no bundler required.