Tailwind CSS

To make styling easier, we will use tailwindcss. With tailwindcss, we can create responsive and attractive web displays easily. If you have never used tailwindcss before, you can add it to your Sveldekit project by following these instructions.

Create Store Notifications

First of all, we will create a store to store notifications. I created a store file with the name notify.ts inside the src/lib/stores folder.

typescript 
        
import { writable } from "svelte/store";

const notify = writable<{
  message: string,
  type: 'success' | 'error' | 'info'
}[]>([]);

function setNotify(message: string, type: 'success' | 'error' | 'info') {
  notify.update((value) => [...value, { message, type }]);
}

function clearNotify() {
  notify.update((value) => value.slice(1));
}

function notifySuccess(message: string) {
  setNotify(message, 'success');
}

function notifyError(message: string) {
  setNotify(message, 'error');
}

function notifyInfo(message: string) {
  setNotify(message, 'info');
}

export { notify, clearNotify, notifySuccess, notifyError, notifyInfo };

In the store above, we create a notify store which contains an array of notifications. We also created a setNotify function to add a new notification to the store, a clearNotify function to remove the first notification from the store, and notifySuccess, notifyError, and notifyInfo functions to add notifications of certain types to the store.

Create Notification Component

Next, we will create a notification component with the name Notification.svelte in the src/components folder.

html 
        
<script lang="ts">

import { notify, clearNotify } from "$lib/stores/notify";
import { fly } from 'svelte/transition';

let timeoutId: any;
$: {
  if ($notify.length > 0) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    
    timeoutId = setTimeout(() => {
      clearNotify();
    }, 3000);
  }
}
</script>

<div class="fixed bottom-7 w-full flex flex-col gap-1 text-sm text-white max-w-xs left-4 z-[5001]" id="toast-container">
  {#each $notify as { message, type }}
  <div transition:fly={{duration: 300,x:-500,y:0,opacity:0.5}} class="flex items-center p-4 {type === 'error' ? 'bg-red- 700' : type === 'success' ? 'bg-green-700' : 'bg-blue-700'} rounded-lg shadow-lg">
    <div class="flex-shrink-0">
      {#if type === 'error'}
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round " stroke-linejoin="round" class="size-5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d ="M12 16h.01"/></svg>
      {/if}
      {#if type === 'success'}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width ="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-. 01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d ="m9 12 2 2 4-4"/></svg>
      {/if}
      {#if type === 'info'}
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width ="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d= "M12 16v-4"/><path d="M12 8h.01"/></svg>
      {/if}
    </div>
    <p class="ms-3">{message}</p>
  </div>
  {/each}

</div>

In the above component, we import the notify store and clearNotify function from the notify.ts file. We also imported fly from svelte/transition to provide animation effects when notifications appear and disappear. We use timeout to clear the notification after 3 seconds. Notifications will appear at the bottom left of the screen and will have different colors according to the type of notification. Error notifications will have a red color, success notifications will have a green color, and info notifications will have a blue color.

Using Notification Component

Lastly, we will use this notification component. You can add the notification component in the +layout.svelte file in the src/routes folder or in other components.

html 
        
<script lang="ts">
import Notification from '$lib/components/Notification.svelte';
import { notifySuccess, notifyError, notifyInfo } from '$lib/stores/notify';
</script>

<!-- ... more code -->
<Notification />
<!-- ... more code -->

<button on:click={() => notifySuccess('Notification success')}>Notification Success</button>
<button on:click={() => notifyError('Error notification')}>Error Notification</button>
<button on:click={() => notifyInfo('Notification info')}>Notification Info</button>

In the code above, we import the notification component and the notifySuccess, notifyError, and notifyInfo functions from the notify.ts file. We also added a notification component in the +layout.svelte file and added buttons to display success, error, and info notifications.

Now, you have successfully created a simple notification using Sveldekit. You can customize the notification display according to your needs. Good luck!