{"id":14962568,"url":"https://github.com/itsarunkumar/svelte-toast","last_synced_at":"2025-06-17T14:34:17.717Z","repository":{"id":202884043,"uuid":"708343091","full_name":"itsarunkumar/svelte-toast","owner":"itsarunkumar","description":"a drop in toast component for svelte","archived":false,"fork":false,"pushed_at":"2024-11-05T03:27:24.000Z","size":342,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T15:04:17.961Z","etag":null,"topics":["svelte","svelte4","sveltejs","sveltekit","toast","ui"],"latest_commit_sha":null,"homepage":"https://svelte-toast.itsarun.cc/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsarunkumar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-22T09:24:32.000Z","updated_at":"2025-04-13T22:58:23.000Z","dependencies_parsed_at":"2023-11-13T07:23:23.404Z","dependency_job_id":"95b4fc51-15ae-4801-9629-8d96f3a13309","html_url":"https://github.com/itsarunkumar/svelte-toast","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"0f972b3c5eabc47db890ffe8ba6539e33f42dcfa"},"previous_names":["itsarunkumar/svelte-toast"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itsarunkumar/svelte-toast","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsarunkumar%2Fsvelte-toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsarunkumar%2Fsvelte-toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsarunkumar%2Fsvelte-toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsarunkumar%2Fsvelte-toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsarunkumar","download_url":"https://codeload.github.com/itsarunkumar/svelte-toast/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsarunkumar%2Fsvelte-toast/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260379544,"owners_count":23000106,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","svelte4","sveltejs","sveltekit","toast","ui"],"created_at":"2024-09-24T13:30:01.827Z","updated_at":"2025-06-17T14:34:12.706Z","avatar_url":"https://github.com/itsarunkumar.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Toast UI\n\nsee in action -\u003e [Home for stoast](https://stoast.vercel.app/)\n\n_[**Svelte Toast UI**](https://github.com/itsarunkumar/svelte-toast) is a versatile and customizable toast notification system for Svelte applications. It allows you to easily display informative messages to your users in a visually appealing and user-friendly way._\n\n## Features\n\n- 🚀 **Easy to Use**: Simple and intuitive API for adding toast notifications.\n- 🎨 **Customizable Styling**: Customize the appearance and transition animations to fit your app's design.\n- ⏳ **Auto Dismiss**: Set the duration for how long toasts should be displayed, and they will automatically disappear.\n- 🌈 **Multiple Types**: Support for different toast types, including success, error, and information.\n- 🧩 **Extendable**: Extend and customize the toast components according to your needs.\n\n## Installation\n\nYou can install Svelte Toast UI using your preferred package manager:\n\n**npm**\n\n```\nnpm i @svelte-kit/svelte-toast\n```\n\n**pnpm**\n\n```\npnpm add @svelte-kit/svelte-toast\n```\n\n## Usage\n\nTo get started with Svelte Toast UI, follow these simple steps:\n\n1.  **Import the required components** in your Svelte application:\n\n    ```\n    \u003cscript\u003e\n      import { Toast, toaster } from '@svelte-kit/svelte-toast';\n    \u003c/script\u003e\n    ```\n\n2.  **Add the `ToastContainer` component** to your layout in your Svelte app's root file. Customize its appearance and position according to your preferences:\n    ```\n    \u003cToast\n      position=\"top-center\" // Position can be 'top', 'bottom', 'left', 'right', 'center', etc.\n      customClass=\"\" // Add your custom tailwind classes for styling\n    /\u003e\n    ```\n3.  **Use the `toaster` object** to trigger toast notifications in your app\n    ```\n    \u003cbutton on:click={() =\u003e toaster.success({ title: 'Success', content: 'Task completed!' })}\u003e\n      Show Success Toast\n    \u003c/button\u003e\n    ```\n4.  **Customize your toasts** by setting properties like `progressColor` in the `toaster` functions. Customize the progress bar color as needed.\n5.  **Tailwind css required for this component** add this to your tailwind config file\n\n```\n    ./node_modules/@svelte-kit/**/*.{html,js,svelte,ts}\n```\n\nadd this in content of the tailwind config file. **important**\n\n**Custom Type toast**\n\n```\ntoaster.show({ title: 'Success', content: 'Task completed!' , type:'error' , progressColor:\"bg-blue-500\" , duration:3000 })\n```\n\n**Promise Toast**\n\n```\ntoaster.promise({ title: 'Promise Toast', content: new Promise((resolve) =\u003e { setTimeout(() =\u003e { resolve('Promise resolved!'); }, 3000); }),  });\n```\n\n## ToastContainer Component\n\nThe `Toast` component is used to create a container for displaying toast notifications. It offers dynamic positioning and transition options for toast notifications.\n\n             **should be placed in root of your project**\n\n### Props\n\n- `position` (optional): Position to display the toast container. Options include 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', and 'bottom-right'.\n- `customClass` (optional): Custom CSS classes to style the container.\n- `withProgress`(default = false) : set true to show the progress bar\n- `closable`(default = true) : set true to not show the close icon in toast\n- `maxToast`(default = 3) : set the no of toast to show\n- `stacked`(default = true) : set stacked to falase , if you dont want the toasts stack on top of each other\n\n### Positioning\n\n- The `position` prop allows you to set the desired position of the toast container, which can be adjusted to 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', or 'bottom-right'.\n- The container's position will affect where the toasts appear on the screen.\n\n### Example\n\n+layout.svelte\n\n```\n\u003cscript\u003e\n  import {Toast} from '@svelte-kit/svelte-toast';\n\n  // Customize the position, styling, and transitions\n  let customPosition = 'top-center';\n\n\u003c/script\u003e\n\n\u003cbutton class=\"px-3 py-1 border bg-slate-50 text-slate-900 rounded-md\" on:click={() =\u003etoaster.success({title:  'Success',content:  'This is a success toast',progressColor:  'bg-green-500' , duration:3000 // in ms})}\u003e\nsuccess\n\u003c/button\u003e\n\n\u003cToast\n  position={customPosition}\n/\u003e\n```\n\n## If you want custom toast\n\n```\n\u003cToast\nposition=\"top-center\nmaxToasts=3\nlet:data\ncustomToast\n\u003e\n\n\u003cdiv class=\"w-80 py-2 text-center border bg-slate-50 border-gray-600 border-opacity-30 shadow-xl rounded-md\"\u003e\n   \u003ch1\u003e{data.title}\u003c/h1\u003e\n   \u003cp\u003e{data.content}\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c/Toast\u003e\n```\n\nThis example demonstrates how to use the `ToastContainer` component and customize its positioning, styling, and transitions to suit your needs.\n\n[Github source code](https://github.com/itsarunkumar/svelte-toast)\n\n**_contributions are welcomed_**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsarunkumar%2Fsvelte-toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsarunkumar%2Fsvelte-toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsarunkumar%2Fsvelte-toast/lists"}