Toast

Transient notification messages that appear briefly and dismiss themselves. No extra layout setup required — the container is created lazily on first use.

Installation

bin/rails g shadcnrb:component toast

How it works

Wrap any trigger element with sui.toast_trigger. On the first click, a body-level toast container is created automatically via the shadcnrb--toast--trigger Stimulus controller. You do not need to place a sui.toaster anywhere in your layout.

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.

<%= 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 — useful for server-side flash messages placed inside a custom container. 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

Drop sui.flash_toasts in your layout to automatically render Rails flash messages as toasts. :alert and :error map to :destructive; everything else uses :default.

# In app/views/layouts/application.html.erb
sui.flash_toasts

# 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 body-level #shadcnrb-toasts container.

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

API