Components
Keyboard shortcut
Page-wide keys that focus or press an element, and the hints that show them.
Usage
After the one-time setup, call the helper directly from ERB. No component import is needed.
<%= lc_stack gap: :related, class: "w-full max-w-sm" do %>
<%= lc_field label: "Filter projects", id: "my-component-filter" do |field| %>
<%= lc_input name: "q", type: :search, placeholder: "Press / to filter", data: lc_shortcut_data("/"), **field %>
<% end %>
<%= lc_text size: :small, tone: :muted do %>
Press <%= lc_kbd "/" %> to filter, then <%= lc_kbd "escape" %> to clear.
<% end %>
<% end %>Examples
Focus a field
<%= lc_stack gap: :related, class: "w-full max-w-sm" do %>
<%= lc_field label: "Filter projects", id: "example-0-filter" do |field| %>
<%= lc_input name: "q", type: :search, placeholder: "Press / to filter", data: lc_shortcut_data("/"), **field %>
<% end %>
<%= lc_text size: :small, tone: :muted do %>
Press <%= lc_kbd "/" %> to filter, then <%= lc_kbd "escape" %> to clear.
<% end %>
<% end %>API reference
Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.
lc_kbd
lc_kbd(keys, **attributes)| Input | Default | Values |
|---|---|---|
| keys | Required | — |
| attributes | {} | Native HTML attributes; class:, data: and aria: merge with defaults |
The examples also use lc_stack, lc_field, lc_input, and lc_text. Each is documented on its own page.
Styling and extension
Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.