Kbd

Represents keyboard keys. Group several with ui_kbd_group to show a shortcut.

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

The kbd registry item installs these files:

app/components/ui_component.rb
app/components/ui/kbd_component.rb
app/components/ui/kbd/group_component.rb
app/helpers/ui/kbd_helper.rb
vendor/shadwire/shadwire.css

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

Usage

<%= ui_kbd_group do %>
  <%= ui_kbd { "⌘" } %>
  <%= ui_kbd { "K" } %>
<% end %>

Examples

Default

A group of keys inside a sentence.

Press ⌘ K to search.

<div class="flex items-center gap-3 text-sm text-muted-foreground">
  Press
  <%= ui_kbd_group do %>
    <%= ui_kbd { "⌘" } %>
    <%= ui_kbd { "K" } %>
  <% end %>
  to search.
</div>

API reference

Every part accepts class / class_name and **attrs. None of its parts takes another argument.