Sonner

Temporary notifications stacked in a polite live region. Fire them with window.toast or through Stimulus.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add sonner --yes

The sonner registry item installs these files:

app/components/ui_component.rb
app/components/ui/sonner_component.rb
app/helpers/ui/sonner_helper.rb
app/javascript/controllers/ui_sonner_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%# Put one toaster in the layout… %>
<%= ui_sonner %>

<%# …and fire it from anywhere. %>
<%= ui_button(data: { action: "click->ui-sonner#toast",
      "ui-sonner-title-param": "Event created",
      "ui-sonner-description-param": "Sunday at 9:00 PM." }) { "Show toast" } %>

Examples

Default

The default, success, error and with-action variants.

<%= ui_sonner do %>
  <div class="flex flex-wrap gap-2">
    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Event created",
          "ui-sonner-description-param": "Sunday, June 25 at 9:00 PM." }) { "Show toast" } %>

    <%= ui_button(variant: :outline, data: {

<%= ui_sonner do %>
  <div class="flex flex-wrap gap-2">
    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Event created",
          "ui-sonner-description-param": "Sunday, June 25 at 9:00 PM." }) { "Show toast" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-variant-param": "success",
          "ui-sonner-title-param": "All set!",
          "ui-sonner-description-param": "Your changes have been saved." }) { "Success" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-variant-param": "error",
          "ui-sonner-title-param": "Something went wrong",
          "ui-sonner-description-param": "The record could not be saved." }) { "Error" } %>

    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "File moved to trash",
          "ui-sonner-action-label-param": "Undo" }) { "With an action" } %>
  </div>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Sonner`	`position`	`:bottom_right`	Where toasts stack: `:top_left`, `:top_center`, `:top_right`, `:bottom_left`, `:bottom_center` or `:bottom_right`.
`Sonner`	`duration`	`4000`	Milliseconds a toast stays before it dismisses itself.