Shadwire
Componentes

Sonner

Notificações temporárias empilhadas numa região live polida. Dispare com window.toast ou via Stimulus.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI: 

shadwire add sonner --yes

O item sonner do registry instala estes arquivos:

  • 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

Este componente usa Stimulus: a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%# Coloque um toaster no layout… %>
<%= ui_sonner %>

<%# …e dispare de qualquer lugar. %>
<%= ui_button(data: { action: "click->ui-sonner#toast",
      "ui-sonner-title-param": "Evento criado",
      "ui-sonner-description-param": "Domingo às 21h." }) { "Mostrar toast" } %>

Exemplos

Padrão

Variantes default, sucesso, erro e com ação.

    <%= ui_sonner do %>
  <div class="flex flex-wrap gap-2">
    <%= ui_button(variant: :outline, data: {
          action: "click->ui-sonner#toast",
          "ui-sonner-title-param": "Evento criado",
          "ui-sonner-description-param": "Domingo, 25 de junho às 21h." }) { "Mostrar toast" } %>

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