Svelte French Toast

Svelte French Toast does one thing and does it well: toast notifications. Ported from the beloved react-hot-toast library by Kabir Goel, it brings the same delightful API and smooth animations to the Svelte ecosystem without unnecessary bloat.

The API is refreshingly simple. Drop a <Toaster /> component somewhere in your layout, then call toast('Hello!') from anywhere in your application. Success, error, loading, and custom toasts are all one function call away. The imperative API means you can trigger toasts from utility functions, API handlers, or form actions without needing to wire up component state — a practical advantage in real-world SvelteKit applications.

The animations are the library’s signature feature. Toasts slide in and out with spring-based physics that feel natural and polished. The entrance, exit, and stacking animations work together smoothly, giving your application a refined feel with zero configuration effort. Compared to CSS-only toast libraries, the difference in perceived quality is noticeable.

Customization is available but has boundaries. You can adjust toast duration, position, and styling through props and CSS overrides. For more complex needs, the library supports passing custom Svelte components as toast content, which opens the door to rich notification layouts with icons, progress bars, or action buttons — though you will need to build those yourself.

On the accessibility front, Svelte French Toast handles the basics. Toasts are rendered in a container that screen readers can detect, but the library does not implement ARIA live regions as rigorously as dedicated accessibility-first solutions would. For most applications this is acceptable, but teams building for strict WCAG compliance should add supplemental live region announcements.

The library weighs very little — a few kilobytes gzipped — making it an easy addition to any project. It plays well with essentially every Svelte UI library since it operates independently of your component system. Whether you are using shadcn-svelte, Skeleton, or plain Tailwind, French Toast integrates without conflict.

For projects that need toast notifications without the overhead of adopting a full component library’s toast system, Svelte French Toast is the pragmatic choice. It is the kind of single-purpose library that earns its place in your dependency list by being small, reliable, and pleasant to use.