Svelte Sonner

screenshot of Svelte Sonner
svelte
vite

An opinionated toast component for Svelte. A port of @emilkowalski's sonner.

Overview:

The Svelte Sonner is an opinionated toast component for Svelte, based on emilkowalski's React implementation. It provides a quick and easy way to display toast notifications in your Svelte application.

Features:

  • Default toast: Displays a basic toast message that can be customized by passing an options object.
  • Success toast: Renders a checkmark icon in front of the message.
  • Info toast: Renders a question mark icon in front of the message.
  • Warning toast: Renders a warning icon in front of the message.
  • Error toast: Renders an error icon in front of the message.
  • Action toast: Renders a button in the toast.
  • Promise toast: Starts in a loading state and automatically updates after the promise resolves or fails.
  • Custom component toast: Allows you to pass a custom component to be rendered as a toast while maintaining default styling.
  • Updating a toast: Allows you to update a toast by using the toast function and passing it the toast id.
  • Customization options: Provides various customization options such as headless toasts, theme customization, position customization, etc.
  • Programmatically remove toast: Allows you to programmatically remove a toast using the toast.dismiss() method.
  • Duration customization: Allows you to change the duration of each toast individually or all toasts globally.
  • Callback functions: Supports onDismiss and onAutoClose callbacks for handling toast dismissal events.
  • Keyboard focus: Allows you to focus on the toast area by pressing ⌥/alt + T.
svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.