Installation

npm i sileo

React

import { sileo, Toaster } from "sileo";
import "sileo/styles.css";

export default function App() {
  return (
    <>
      <Toaster position="top-right" />
      <YourApp />
    </>
  );
}

// Trigger toasts anywhere
sileo.success({ title: "Saved", description: "Your changes were saved." });
sileo.error({ title: "Error", description: "Something went wrong." });

Vue

<script setup>
import { Toaster, sileo } from "sileo/vue";
import "sileo/styles.css";

function handleClick() {
  sileo.success({ title: "Saved", description: "Your changes were saved." });
}
</script>

<template>
  <Toaster position="top-right" />
  <button @click="handleClick">Show toast</button>
</template>

API

The sileo API is identical across both frameworks:

sileo.show({ title: "Hello" });
sileo.success({ title: "Saved", description: "Your changes were saved." });
sileo.error({ title: "Error", description: "Something went wrong." });
sileo.warning({ title: "Warning", description: "Proceed with caution." });
sileo.info({ title: "Info", description: "Here's some information." });

// Promise-based
sileo.promise(fetchData(), {
  loading: { title: "Loading..." },
  success: (data) => ({ title: "Done", description: `Loaded ${data.length} items.` }),
  error: (err) => ({ title: "Failed", description: String(err) }),
});

// Dismiss & clear
sileo.dismiss(id);
sileo.clear();

Toaster Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | position | "top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right" | "top-right" | Where toasts appear | | offset | number \| string \| { top?, right?, bottom?, left? } | — | Viewport offset | | options | Partial<SileoOptions> | — | Default options for all toasts |

For detailed docs, click here: https://sileo.aaryan.design