Item

A flexible row: media + content (title/description) + actions. Group them with ui_item_group.

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

The item registry item installs these files:

app/components/ui_component.rb
app/components/ui/item_component.rb
app/components/ui/item/group_component.rb
app/components/ui/item/media_component.rb
app/components/ui/item/content_component.rb
app/components/ui/item/title_component.rb
app/components/ui/item/description_component.rb
app/components/ui/item/actions_component.rb
app/components/ui/item/header_component.rb
app/components/ui/item/footer_component.rb
app/components/ui/item/separator_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/item_helper.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

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

Usage

<%= ui_item(variant: :outline) do %>
  <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
  <%= ui_item_content do %>
    <%= ui_item_title { "Report.pdf" } %>
    <%= ui_item_description { "2.4 MB" } %>
  <% end %>
<% end %>

Examples

Default

An item with media, content and an action.

Report.pdf

2.4 MB · updated 2 days ago

<%= ui_item_group(class: "w-80") do %>
  <%= ui_item(variant: :outline) do %>
    <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
    <%= ui_item_content do %>
      <%= ui_item_title { "Report.pdf" } %>
      <%= ui_item_description { "2.4 MB · updated 2 days ago" } %>
    <% end %>
    <%= ui_item_actions do %>

<%= ui_item_group(class: "w-80") do %>
  <%= ui_item(variant: :outline) do %>
    <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
    <%= ui_item_content do %>
      <%= ui_item_title { "Report.pdf" } %>
      <%= ui_item_description { "2.4 MB · updated 2 days ago" } %>
    <% end %>
    <%= ui_item_actions do %>
      <%= ui_button(variant: :ghost, size: :icon) { ui_icon("ellipsis", label: "Actions") } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Item`	`tag`	`:div`	The element to render: `:a` with `href:`, or `:button`, for a row you can click.
`Item`	`variant`	`:default`	The row's surface. One of `:default`, `:outline`, `:muted`.
`Item`	`size`	`:default`	Its padding and gap. One of `:default`, `:sm`.
`Item::Media`	`variant`	`:default`	`:icon` draws a bordered tile, `:image` crops a square thumbnail, `:default` is a bare slot. One of `:default`, `:icon`, `:image`.