sileo-react-toasts

Official documentation: https://sileo.aaryan.design/docs API Reference: https://sileo.aaryan.design/docs/api Toaster API: https://sileo.aaryan.design/docs/api/toaster Styling Guide: https://sileo.aaryan.design/docs/styling Playground: https://sileo.aaryan.design/play GitHub: https://github.com/hiaaryan/sileo

Sileo is a tiny, opinionated, physics-based toast component for React. It uses gooey SVG morphing (via an feGaussianBlur + feColorMatrix filter chain) and spring animations (powered by motion/react, formerly Framer Motion) to create buttery-smooth notifications that look beautiful by default with zero configuration.

Sileo is not a general-purpose notification center. It is a highly polished, visually distinctive toast system designed for single-line feedback messages with optional expandable descriptions.

Provide implementation guidance for Sileo (npm package "sileo") toast notifications in React apps. Use when adding the Toaster viewport, firing global toasts via sileo.success/error/warning/info/show/action, handling async flows with sileo.promise, dismissing/clearing toasts, configuring positions/offset, theming with light/dark/system modes, and customizing styling via fill, styles overrides, autopilot, roundness, CSS variables, and data-attribute selectors. Also use this skill for swipe-to-dismiss behavior, custom icons, JSX descriptions, reduced-motion support, TypeScript type exports, and understanding Sileo's internal SVG gooey morphing architecture. Make sure to use this skill whenever the user mentions sileo, toast notifications in React, gooey toasts, physics-based notifications, or wants to add any kind of toast/notification system using sileo, even if they don't explicitly name the package. Source: xoverlap/sileo-skill.