shadcn-rails

Item

A flexible flex container for displaying titles, descriptions, and actions.

No JavaScript Required
Photo Library

Manage your photos and albums

Installation

Add the component to your project:

rails generate shadcn:component item

Usage

<%= render Shadcn::ItemComponent.new do |item| %>
  <% item.with_media(variant: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
  <% end %>
  <% item.with_content do |content| %>
    <% content.with_title { "Photo Library" } %>
    <% content.with_description { "Manage your photos and albums" } %>
  <% end %>
  <% item.with_actions do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :sm) { "Open" } %>
  <% end %>
<% end %>

Examples

Outline Variant

Use the outline variant for bordered items.

Documents

View and edit your documents

<%= render Shadcn::ItemComponent.new(variant: :outline) do |item| %>
  <% item.with_media(variant: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/></svg>
  <% end %>
  <% item.with_content do |content| %>
    <% content.with_title { "Documents" } %>
    <% content.with_description { "View and edit your documents" } %>
  <% end %>
<% end %>

Muted Variant

Use the muted variant for subtle backgrounds.

Blocked

This feature is currently unavailable

<%= render Shadcn::ItemComponent.new(variant: :muted) do |item| %>
  <% item.with_media(variant: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 14.14 14.14"/></svg>
  <% end %>
  <% item.with_content do |content| %>
    <% content.with_title { "Blocked" } %>
    <% content.with_description { "This feature is currently unavailable" } %>
  <% end %>
<% end %>

As Link

Use the href prop to render as a clickable link.

Settings

Manage your account settings

 
<%= render Shadcn::ItemComponent.new(href: "/settings", class_name: "hover:bg-accent rounded-lg cursor-pointer") do |item| %>
  <% item.with_media(variant: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
  <% end %>
  <% item.with_content do |content| %>
    <% content.with_title { "Settings" } %>
    <% content.with_description { "Manage your account settings" } %>
  <% end %>
<% end %>

With Avatar

Use with avatars for user lists.

John Doe
John Doe

john@example.com

<%= render Shadcn::ItemComponent.new do |item| %>
  <% item.with_media do %>
    <%= render Shadcn::AvatarComponent.new(
      src: "https://github.com/shadcn.png",
      alt: "John Doe"
    ) %>
  <% end %>
  <% item.with_content do |content| %>
    <% content.with_title { "John Doe" } %>
    <% content.with_description { "john@example.com" } %>
  <% end %>
  <% item.with_actions do %>
    <%= render Shadcn::ButtonComponent.new(variant: :ghost, size: :sm) { "Message" } %>
  <% end %>
<% end %>

Item List

Combine multiple items with separators.

Payments

Manage payment methods

Notifications

Configure notification settings

Security

Manage security preferences

API Reference

ItemComponent

API Reference

Prop Type Default Description
variant Symbol :default Visual style - :default, :outline, or :muted
size Symbol :default Size variant - :default or :sm
tag Symbol :div HTML tag to render (:div, :li, etc.)
href String nil URL for link items (automatically uses :a tag)
class_name String nil Additional CSS classes to apply

ItemMediaComponent

API Reference

Prop Type Default Description
variant Symbol :default Media variant - :default, :icon, or :image

Slots

Slot Description
with_media(variant:) Media slot for icons, images, or avatars
with_content Content wrapper containing title and description slots
with_title Title text (inside content slot)
with_description Description text (inside content slot)
with_actions Container for action buttons
with_header Header content above main content
with_footer Footer content below main content

Accessibility

  • Use the tag: :li prop when rendering inside a list
  • Interactive items should have visible focus states
  • When using href, the component automatically renders as an anchor tag
  • Use separators with role="separator" between items