Blocks

Card

A container that groups related content and actions with a bordered, elevated surface.

Installation

bin/rails g shadcnrb:component card

Usage

Account

Manage your account settings.

Card content goes here.

<%= sui.card(class: "w-[360px]") do |c| %>
  <%= c.header do %>
    <%= c.title "Account" %>
    <%= c.description "Manage your account settings." %>
  <% end %>
  <%= c.content do %>
    <%= tag.p "Card content goes here.", class: "text-sm text-muted-foreground" %>
  <% end %>
  <%= c.footer do %>
    <%= sui.button "Save changes" %>
  <% end %>
<% end %>

With action

Notifications

Choose what you want to be notified about.

Notification preferences appear here.

<%= sui.card(class: "w-[360px]") do |c| %>
  <%= c.header do %>
    <%= c.title "Notifications" %>
    <%= c.description "Choose what you want to be notified about." %>
    <%= c.action do %>
      <%= sui.button "Settings", variant: :outline, size: :sm %>
    <% end %>
  <% end %>
  <%= c.content do %>
    <%= tag.p "Notification preferences appear here.", class: "text-sm text-muted-foreground" %>
  <% end %>
<% end %>

Full form card

Create project

Deploy your new project in one click.

Name

Framework

<%= sui.card(class: "w-[380px]") do |c| %>
  <%= c.header do %>
    <%= c.title "Create project" %>
    <%= c.description "Deploy your new project in one click." %>
    <%= c.action { sui.button "×", variant: :ghost } %>
  <% end %>
  <%= c.content do %>
    <%= tag.div(class: "space-y-4") do %>
      <%= tag.div(class: "space-y-2") do %>
        <%= sui.label("Name", for_id: "project-name") %>
        <%= sui.input(id: "project-name", placeholder: "My awesome project") %>
      <% end %>
      <%= tag.div(class: "space-y-2") do %>
        <%= sui.label("Framework", for_id: "framework") %>
        <%= sui.input(id: "framework", placeholder: "e.g. Rails, Next.js") %>
      <% end %>
    <% end %>
  <% end %>
  <%= c.footer(class: "gap-2") do %>
    <%= sui.button "Cancel", variant: :outline %>
    <%= sui.button "Deploy" %>
  <% end %>
<% end %>

API

Method	Args	Description
`sui.card`	`**opts, &block`	Root card container (`div`); yields a `c` proxy.
`c.header`	`**opts, &block`	Header grid; activates two-column layout when a `c.action` is present.
`c.title`	`name = nil, **opts, &block`	Semibold title text. Pass a string or a block.
`c.description`	`name = nil, **opts, &block`	Muted description text below the title.
`c.action`	`**opts, &block`	Slot that pins content to the top-right of the header.
`c.content`	`**opts, &block`	Main body area with horizontal padding.
`c.footer`	`**opts, &block`	Flex row at the bottom, typically used for action buttons.