geist mono

Search…

Toast

Custom + no-code options.

Toast

Custom + no-code options.

Sonner toasts

This is a custom toast

Head to the desktop site to copy.

Updated:

Nov 8, 2023

Type:

Code

Notes

  • framer.today uses custom Sonner toasts for all its alerts. It combines a code component to render the toast and handle styling and an override to trigger it.

  • Making single toasts with no-code is easy using overlays and component effects, but there are a few caveats with this, notably that you can't dismiss it after a timeout.

  • Remix link includes full setup guide for both code and no-code.

  • React-hot-toast is a more established library that would work in the same manner.

Help

How do I add code components?

How do I add code overrides?