shadcn-rails

Kbd

Displays keyboard input or shortcuts.

No JavaScript Required
K
kbd/default 
<%= render Shadcn::KbdComponent.new { "K" } %>

Installation

Add the component to your project:

rails generate shadcn:add kbd

Usage

<%= render Shadcn::KbdComponent.new { "K" } %>

Examples

Single Key

K 
<%= render Shadcn::KbdComponent.new { "K" } %>

Key Combination

⌘ S 
<div class="flex items-center gap-1">
  <%= render Shadcn::KbdComponent.new { "⌘" } %>
  <%= render Shadcn::KbdComponent.new { "S" } %>
</div>

Common Shortcuts

Save
⌘ S
Copy
⌘ C
Search
⌘ K 
<div class="space-y-3">
  <div class="flex items-center justify-between">
    <span class="text-sm text-muted-foreground">Save</span>
    <div class="flex items-center gap-1">
      <%= render Shadcn::KbdComponent.new { "⌘" } %>
      <%= render Shadcn::KbdComponent.new { "S" } %>
    </div>
  </div>
  <div class="flex items-center justify-between">
    <span class="text-sm text-muted-foreground">Copy</span>
    <div class="flex items-center gap-1">
      <%= render Shadcn::KbdComponent.new { "⌘" } %>
      <%= render Shadcn::KbdComponent.new { "C" } %>
    </div>
  </div>
  <div class="flex items-center justify-between">
    <span class="text-sm text-muted-foreground">Search</span>
    <div class="flex items-center gap-1">
      <%= render Shadcn::KbdComponent.new { "⌘" } %>
      <%= render Shadcn::KbdComponent.new { "K" } %>
    </div>
  </div>
</div>

Windows/Linux Keys

Ctrl Shift P 
<div class="flex items-center gap-1">
  <%= render Shadcn::KbdComponent.new { "Ctrl" } %>
  <%= render Shadcn::KbdComponent.new { "Shift" } %>
  <%= render Shadcn::KbdComponent.new { "P" } %>
</div>

API Reference

API Reference

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

Accessibility

  • The <kbd> element semantically indicates keyboard input
  • Screen readers will announce the content appropriately as keyboard-related
  • Use with descriptive text for context (e.g., "Press ⌘K to search")

Note

The Kbd component is for displaying keyboard shortcuts visually. If you need a command palette that opens when pressing ⌘K, you'll want to use the Command component instead.