Kbd
Kbd - Phlex implementation
Examples
Default
Display textual user input from keyboard.
Ctrl
Shift
Alt
Enter
<div class="flex flex-wrap items-center gap-4">
<%= render "ui/kbd", content: "Ctrl" %>
<%= render "ui/kbd", content: "Shift" %>
<%= render "ui/kbd", content: "Alt" %>
<%= render "ui/kbd", content: "Enter" %>
</div>
Ctrl
Shift
Alt
Enter
<div class="flex flex-wrap items-center gap-4">
<%= render UI::Kbd.new { "Ctrl" } %>
<%= render UI::Kbd.new { "Shift" } %>
<%= render UI::Kbd.new { "Alt" } %>
<%= render UI::Kbd.new { "Enter" } %>
</div>
Ctrl
Shift
Alt
Enter
<div class="flex flex-wrap items-center gap-4">
<%= render(UI::KbdComponent.new) { "Ctrl" } %>
<%= render(UI::KbdComponent.new) { "Shift" } %>
<%= render(UI::KbdComponent.new) { "Alt" } %>
<%= render(UI::KbdComponent.new) { "Enter" } %>
</div>Key Combinations
Grouped keyboard shortcuts.
Ctrl
+
C
⌘
K
<div class="flex flex-wrap items-center gap-4">
<%= render "ui/kbd/group" do %>
<%= render "ui/kbd", content: "Ctrl" %>
+
<%= render "ui/kbd", content: "C" %>
<% end %>
<%= render "ui/kbd/group" do %>
<%= render "ui/kbd", content: "⌘" %>
<%= render "ui/kbd", content: "K" %>
<% end %>
</div>
Ctrl
+
C
⌘
K
<div class="flex flex-wrap items-center gap-4">
<%= render UI::KbdGroup.new do %>
<%= render UI::Kbd.new { "Ctrl" } %>
+
<%= render UI::Kbd.new { "C" } %>
<% end %>
<%= render UI::KbdGroup.new do %>
<%= render UI::Kbd.new { "⌘" } %>
<%= render UI::Kbd.new { "K" } %>
<% end %>
</div>
Ctrl
+
C
⌘
K
<div class="flex flex-wrap items-center gap-4">
<%= render(UI::KbdGroupComponent.new) do %>
<%= render(UI::KbdComponent.new) { "Ctrl" } %>
+
<%= render(UI::KbdComponent.new) { "C" } %>
<% end %>
<%= render(UI::KbdGroupComponent.new) do %>
<%= render(UI::KbdComponent.new) { "⌘" } %>
<%= render(UI::KbdComponent.new) { "K" } %>
<% end %>
</div>Mac Symbols
Mac-style keyboard modifier symbols.
⌘
⌃
⌥
⇧
⏎
⌫
<div class="flex flex-wrap items-center gap-4">
<%= render "ui/kbd", content: "⌘" %>
<%= render "ui/kbd", content: "⌃" %>
<%= render "ui/kbd", content: "⌥" %>
<%= render "ui/kbd", content: "⇧" %>
<%= render "ui/kbd", content: "⏎" %>
<%= render "ui/kbd", content: "⌫" %>
</div>
⌘
⌃
⌥
⇧
⏎
⌫
<div class="flex flex-wrap items-center gap-4">
<%= render UI::Kbd.new { "⌘" } %>
<%= render UI::Kbd.new { "⌃" } %>
<%= render UI::Kbd.new { "⌥" } %>
<%= render UI::Kbd.new { "⇧" } %>
<%= render UI::Kbd.new { "⏎" } %>
<%= render UI::Kbd.new { "⌫" } %>
</div>
⌘
⌃
⌥
⇧
⏎
⌫
<div class="flex flex-wrap items-center gap-4">
<%= render(UI::KbdComponent.new) { "⌘" } %>
<%= render(UI::KbdComponent.new) { "⌃" } %>
<%= render(UI::KbdComponent.new) { "⌥" } %>
<%= render(UI::KbdComponent.new) { "⇧" } %>
<%= render(UI::KbdComponent.new) { "⏎" } %>
<%= render(UI::KbdComponent.new) { "⌫" } %>
</div>Features
- Keyboard navigation
- Custom styling with Tailwind classes
API Reference
Kbd
Displays textual user input from keyboard, helping users understand
Group
Groups multiple keyboard keys together with consistent spacing.