shadcn-rails

Card

Displays a card with header, content, and footer.

No JavaScript Required

Create project

Deploy your new project in one-click.

Installation

Add the component to your project:

rails generate shadcn:component card

Usage

<%= render Shadcn::CardComponent.new do |card| %>
  <% card.with_header do |header| %>
    <% header.with_title { "Card Title" } %>
    <% header.with_description { "Card Description" } %>
  <% end %>
  <% card.with_content do %>
    <p>Card Content</p>
  <% end %>
  <% card.with_footer do %>
    <%= render Shadcn::ButtonComponent.new { "Action" } %>
  <% end %>
<% end %>

Examples

Simple Card

Card Title

Card Description

Card content goes here.

With Footer

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Stat Cards

$45,231.89

Total Revenue

+20.1% from last month

+2350

Subscriptions

+180.1% from last month

+573

Active Now

+201 since last hour

Profile Card

Shadcn

@shadcn

Shadcn

Creator of shadcn/ui. Building in public at @shadcn.

API Reference

API Reference

Prop Type Default Description
class_name String nil Additional CSS classes to apply

Slots

Slot Description
with_header Card header section (contains title and description slots)
with_title Card title (inside header or standalone)
with_description Card description text
with_content Main card content area
with_footer Card footer section

Accessibility

  • Card is a visual container and has no inherent semantic meaning
  • Use appropriate heading levels for card titles based on page context
  • Ensure interactive elements within cards are keyboard accessible