Card

A bordered surface for grouping related content.

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

The card registry item installs these files:

app/components/ui_component.rb
app/components/ui/card_component.rb
app/components/ui/card/header_component.rb
app/components/ui/card/title_component.rb
app/components/ui/card/description_component.rb
app/components/ui/card/content_component.rb
app/components/ui/card/footer_component.rb
app/helpers/ui/card_helper.rb
vendor/shadwire/shadwire.css

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

Usage

<%= ui_card do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Create project" } %>
    <%= ui_card_description { "Deploy your new project in one click." } %>
  <% end %>
  <%= ui_card_content { "Card content." } %>
<% end %>

Or render the components directly:

<%= render Ui::CardComponent.new do %>
  <%= render Ui::Card::HeaderComponent.new do %>
    <%= render Ui::Card::TitleComponent.new do %>
      Create project
    <% end %>
  <% end %>
<% end %>

Composition

Card
|-- Card::Header
|   |-- Card::Title
|   `-- Card::Description
|-- Card::Content
`-- Card::Footer

Examples

Default

Compose header, title, description, content and footer inside the card.

Create project

Set the name, the visibility, and who joins at the start.

Use cards to group related content and actions.

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Create project" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Set the name, the visibility, and who joins at the start.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Create project" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Set the name, the visibility, and who joins at the start.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>
    <p class="text-sm text-muted-foreground">Use cards to group related content and actions.</p>
  <% end %>
  <%= ui_card_footer(class: "justify-end gap-2", data: { slot: "card-footer" }) do %>
    <%= ui_button(variant: :outline, size: :sm) { "Cancel" } %>
    <%= ui_button(size: :sm) { "Create" } %>
  <% end %>
<% end %>

API reference

Available helpers: ui_card, ui_card_header, ui_card_title, ui_card_description, ui_card_content and ui_card_footer.

API	Element	Description
`ui_card`	`div`	The container: border, card surface and shadow.
`ui_card_header`	`div`	The top area, with vertical spacing.
`ui_card_title`	`h3`	The title; `tag:` picks the heading level (`tag_name:`, its old name, still works).
`ui_card_description`	`p`	Supporting text in muted foreground.
`ui_card_content`	`div`	The main content.
`ui_card_footer`	`div`	Bottom actions or metadata.