Skip to content
Pinky UI

feedback

Morph Toast

A capped, pausable notification stack with action and swipe dismissal.

  • feedback
  • toast
  • notification
  • undo

Live preview

Quick usage

usage
import { ToastProvider } from "@pinky-ui/systems";

<ToastProvider>{children}</ToastProvider>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for short-lived notifications that need a visible stack, an optional action, and recovery without interrupting the current task.

Use when

Saving, inviting, or completing a background action needs brief global acknowledgement.

Avoid

Validation beside a field, continuous state, or irreversible failure that needs a durable surface.

Accessibility

Use status/live semantics carefully, keep a Dismiss button, pause on focus/hover, and cap the stack.

Keyboard and touch

Actions are buttons; Escape remains available through the surrounding workflow and swipe is optional.

Reduced motion and performance

Resolve opacity/position immediately when reduced motion is active; clean timers and avoid repeated announcements.

Composition and anti-patterns

Choose Inline Feedback or Action Undo Bar when they are closer to the cause. Do not toast every click.

Open this skill on its own page