Alert

A callout block with alert semantics, for messages that matter.

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 alert --yes

The alert registry item installs these files:

app/components/ui_component.rb
app/components/ui/alert_component.rb
app/components/ui/alert/title_component.rb
app/components/ui/alert/description_component.rb
app/helpers/ui/alert_helper.rb
vendor/shadwire/shadwire.css

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

Usage

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Heads up!" } %>
  <%= ui_alert_description { "You can add components to your app with the CLI." } %>
<% end %>

Or render Ui::AlertComponent directly:

<%= render Ui::AlertComponent.new(variant: :destructive) do %>
  <%= render Ui::Alert::TitleComponent.new do %>
    Could not save your changes.
  <% end %>
<% end %>

Examples

Default

An important message, with role="alert" by default.

Heads up!

You can add components to your app with the CLI.

<%= ui_alert do %>
  <%= ui_icon("terminal") %>
  <%= ui_alert_title { "Heads up!" } %>
  <%= ui_alert_description { "You can add components to your app with the CLI." } %>
<% end %>

Destructive

Use this for errors or high-severity warnings.

Could not save

Check the highlighted fields and try again.

<%= ui_alert(variant: :destructive) do %>
  <%= ui_icon("circle-alert") %>
  <%= ui_alert_title { "Could not save" } %>
  <%= ui_alert_description { "Check the highlighted fields and try again." } %>
<% end %>

API reference

ui_alert, ui_alert_title and ui_alert_description wrap the matching components. A ui_icon placed first gets a column of its own and the text lines up beside it. Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Alert`	`variant`	`:default`	`:default` or `:destructive`.
`Alert`	`role` (attribute)	`"alert"`	Override it when the message should not be announced immediately.
`Alert::Title`	—	—	The heading line, clamped to one line.
`Alert::Description`	—	—	The body, muted; holds a line of text or several `<p>`.