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)