Toast

Transient notification messages that appear briefly and dismiss themselves. One sui.toaster in the layout owns the container, like sonner's <Toaster />.

Installation

bin/rails g shadcnrb:component toast

How it works

Drop sui.toaster in your layout once. It renders the positioned container, any pending flash messages, and a <template> per variant. Wrap any trigger element with sui.toast_trigger: on click the shadcnrb--toast--trigger controller clones the template for its variant, so JS-created toasts share the server markup and your style.rb overrides.

# In app/views/layouts/application.html.erb
sui.toaster position: "bottom-right"

position: takes sonner's six corners — top-left, top-center, top-right (default), bottom-left, bottom-center, bottom-right. Unanchored, server-driven overlays (streamed dialogs, drawers) land in the sibling sui.overlay_outlet.

Usage

Basic toast

<%= sui.toast_trigger title: "Saved", description: "Your changes have been saved." do %>
  <%= sui.button "Show Toast", variant: :outline %>
<% end %>

Destructive variant

Use variant: :destructive for error or warning messages. Each variant has a leading icon, defined in style.rb under icons so an app can retint or drop them.

<%= sui.toast_trigger title: "Error", description: "Something went wrong.", variant: :destructive do %>
  <%= sui.button "Show Error Toast", variant: :destructive %>
<% end %>

Custom duration

Pass duration: in milliseconds. The default is 5000 ms.

<%= sui.toast_trigger title: "Lingering notice", description: "Visible for 10 seconds.", duration: 10000 do %>
  <%= sui.button "Show Long Toast", variant: :secondary %>
<% end %>

Static server-rendered toast

sui.toast renders a static toast element directly into the DOM — icon, title, description, and a close button. This is the rarer use case; prefer toast_trigger for interactive flows.

<div class="w-[320px]">
  <%= sui.toast "File uploaded", description: "avatar.png has been saved." %>
</div>

Flash integration

Flash toasts

sui.toaster renders pending Rails flash messages as toasts. :alert and :error map to :destructive; everything else uses :default. sui.flash_toasts is the bare helper if you render the container yourself.

# In a controller:
redirect_to root_path, notice: "Saved successfully."

Turbo Stream

Use sui.toast_stream to append a toast from a Turbo Stream response. Targets the toaster's #shadcnrb-toasts container.

# In a controller
respond_to do |format|
  format.turbo_stream { render turbo_stream: sui.toast_stream("Saved", variant: :default) }
end

API