svelte-daisy-toast
Version 0.0.2
Simple, beautiful toasts in Svelte with DaisyUI.
1. Install
bun add svelte-daisy-toast
2. Add to Tailwind config
Modify your tailwind.config.js to add svelte-daisy-toast, otherwise Tailwind will tree-shake the "unused" styles!
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
+ './node_modules/svelte-daisy-toast/dist/**/*.{js,svelte}'
],
theme: {
extend: {}
},
plugins: [require('daisyui')]
};
3. Add to layout
<!-- +layout.svelte -->
<script>
import Toast from 'svelte-daisy-toast';
</script>
<Toast position="bottom-center" />
<slot />
4. Use
<!-- +page.svelte -->
<script>
import { toast } from 'svelte-daisy-toast';
function boop() {
toast({
title: 'Boop',
message: 'Hello Svelte!',
duration: 5000,
type: 'success'
});
}
</script>
<button class="btn" on:click={boop}>I'm a button</button>