sileo-react-toasts

Name: sileo-react-toasts
Availability: InStock
Author: Pepe

Implement Sileo toast notifications in React with physics-based animations and swipe-to-dismiss.

Updated Jan 7, 2026

Search Tags:#ui #react #notifications #toast #swipe #sileo #gooey

Ready to run

npx skills add https://github.com/pepeccz/msi-a --skill sileo-react-toasts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sileo-react-toasts
Source: https://github.com/pepeccz/msi-a/tree/main/.agents/skills/sileo-react-toasts
Command: npx skills add https://github.com/pepeccz/msi-a --skill sileo-react-toasts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Help developers implement polished, physics-based toast notifications in React applications.

Core Features & Use Cases

Physics-based gooey SVG toast components with expandable details, per-state styling, and accessible live regions.
Quick setup with a single Toaster viewport and simple API calls (sileo.success, sileo.info, sileo.show) for synchronous and asynchronous flows.
Theming, per-toast overrides, and swipe-to-dismiss support to adapt to various UI requirements in React/Next.js apps.

Quick Start

Mount a Toaster at your app root and trigger toasts using the sileo API (e.g., sileo.success or sileo.info) as needed.

Frequently Asked Questions about sileo-react-toasts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement physics-based React toast notifications in my app?▼

To implement physics-based React toast notifications, mount a single Toaster viewport at your app root and trigger toasts using simple API calls like sileo.success or sileo.info. This provides polished, ephemeral feedback with gooey SVG animations and swipe-to-dismiss support.

Can I use these toast notifications in a Next.js project?▼

Yes, these toast notifications are designed for both React and Next.js projects. They support theming and per-toast overrides, allowing you to adapt accessible live regions and ephemeral feedback to various UI requirements within your Next.js application.

How do swipe-to-dismiss and expandable details work in React toasts?▼

Swipe-to-dismiss and expandable details function through physics-based gooey SVG components. This mechanism allows users to physically swipe notifications away and expand their content, providing interactive per-state styling and accessible feedback for asynchronous flows.

What's the best way to trigger synchronous and asynchronous toast flows in React?▼

The best way to trigger synchronous and asynchronous toast flows is by using the sileo API (eileo.success, sileo.info, sileo.show). These simple API calls manage ephemeral feedback and per-toast actions seamlessly within your React application.

Do I need specific dependencies to add accessible live regions for toasts?▼

No specific external dependencies are required to add accessible live regions for toasts. The Skill is self-contained, enforcing a safe structure with a root SKILL.md and optional directories to ensure accessible, ephemeral notifications without external toxicity or conflicts.