Toaster

The viewport component that renders toasts. Add it once to your layout.

import { Toaster } from "sileo";

Prop	Type	Default	Description
children	ReactNode	—	App content to render alongside toasts
position	SileoPosition	"top-right"	Default position for all toasts
offset	number \| string \| object	—	Distance from viewport edges
options	Partial<SileoOptions>	—	Default options merged into every toast
theme	"light" \| "dark" \| "system"	—	Automatically sets fill based on color scheme. system follows the OS preference

Offset

The offset prop accepts a number, string, or per-side config.

<Toaster offset={20} />

<Toaster offset={{ top: 20, right: 16 }} />

Set global defaults that apply to every toast.

<Toaster
  options={{
    fill: "#171717",
    styles: { description: "text-white/75!" },
  }}
/>

type SileoPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";