Empty
A placeholder for empty data states — shows an icon, title, description, and an action.
Installation
bin/rails g shadcnrb:component empty
Usage
Compose with e.header, e.media,
e.title, e.description, and
e.content.
No results found
Try adjusting your search or filter to find what you're looking for.
<%= sui.empty do |e| %> <%= e.header do %> <%= e.media(variant: :icon) do %> <%= sui.icon(:search) %> <% end %> <%= e.title "No results found" %> <%= e.description "Try adjusting your search or filter to find what you're looking for." %> <% end %> <%= e.content do %> <%= sui.button "Clear filters", variant: :outline %> <% end %> <% end %>
Without media
The media slot is optional.
No projects yet
Get started by creating your first project.
<%= sui.empty do |e| %> <%= e.header do %> <%= e.title "No projects yet" %> <%= e.description "Get started by creating your first project." %> <% end %> <%= e.content do %> <%= sui.button "New project" %> <% end %> <% end %>
API
| Method | Args | Default | Description |
|---|---|---|---|
sui.empty | **opts | — | Dashed-border container, centers everything; yields an e proxy |
e.header | **opts | — | Wraps media + title + description |
e.media | variant: :default, :icon | — | Icon container; :icon wraps in a muted square |
e.title | name | — | Heading text |
e.description | name | — | Muted supporting text |
e.content | **opts | — | Action area below the header (buttons, links) |