Kbd

Representa teclas do teclado. Agrupe várias com ui_kbd_group para exibir um atalho.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add kbd --yes

O item kbd do registry instala estes arquivos:

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

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

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

Exemplos

Padrão

Um grupo de teclas dentro de um texto.

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>

Referência da API

Toda parte aceita class / class_name e **attrs. Nenhuma das partes recebe outro argumento.