Empty

An empty state: media, title, description and actions, centred.

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

The empty registry item installs these files:

app/components/ui_component.rb
app/components/ui/empty_component.rb
app/components/ui/empty/header_component.rb
app/components/ui/empty/media_component.rb
app/components/ui/empty/title_component.rb
app/components/ui/empty/description_component.rb
app/components/ui/empty/content_component.rb
app/helpers/ui/empty_helper.rb
vendor/shadwire/shadwire.css

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

Usage

<%= ui_empty do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "New messages show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Refresh" } %>

<%= ui_empty do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "New messages show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Refresh" } %>
  <% end %>
<% end %>

Examples

Default

An empty state with an icon, text and one action.

No messages

When you get messages, they show up here.

<%= ui_empty(class: "w-80 rounded-lg border") do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "When you get messages, they show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(variant: :outline, size: :sm) { "Refresh" } %>

<%= ui_empty(class: "w-80 rounded-lg border") do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "When you get messages, they show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(variant: :outline, size: :sm) { "Refresh" } %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Empty::Media`	`variant`	`:default`	`:icon` draws a muted tile around an icon; `:default` is a bare slot. One of `:default`, `:icon`.