Keyboard

The Keyboard component displays keyboard key shortcuts with proper styling. It's useful for showing command shortcuts, keyboard navigation hints, and hotkeys in your UI.

Installation

Add the keyboard component to your project:

npx velyx@latest add kbd

pnpm dlx velyx@latest add kbd

yarn dlx velyx@latest add kbd

bunx --bun velyx@latest add kbd

Usage

Single Key

<x-ui.kbd keys="cmd+k" />

Multiple Keys

<x-ui.kbd :keys="['ctrl', 'shift', 'right']" variant="outline" />

Large Size

<x-ui.kbd keys="enter" size="lg" />

Props

Examples

Basic Single Key

<x-ui.kbd keys="k" />

Command Key Shortcut

<x-ui.kbd keys="cmd+k" />

Control Key Combination

<x-ui.kbd :keys="['ctrl', 's']" />

Multi-Key Combination

<x-ui.kbd :keys="['ctrl', 'shift', 'right']" />

With Different Sizes

<x-ui.kbd keys="enter" size="sm" />
<x-ui.kbd keys="enter" size="md" />
<x-ui.kbd keys="enter" size="lg" />

Outline Variant

<x-ui.kbd keys="esc" variant="outline" />

Inline with Text

<p>
    Press
    <x-ui.kbd keys="cmd+k" class="mx-1" />
    to open command palette
</p>

In Documentation

<div class="prose">
    <h3>Keyboard Shortcuts</h3>
    <ul>
        <li>
            <strong>Save:</strong>
            <x-ui.kbd :keys="['ctrl', 's']" class="ml-2" />
        </li>
        <li>
            <strong>Find:</strong>
            <x-ui.kbd :keys="['ctrl', 'f']" class="ml-2" />
        </li>
        <li>
            <strong>Quit:</strong>
            <x-ui.kbd keys="ctrl+q" class="ml-2" />
        </li>
    </ul>
</div>

With Action Buttons

<div class="flex items-center gap-4">
    <span>Press</span>
    <x-ui.kbd :keys="['ctrl', 'k']" />
    <span>to search</span>
</div>

Common Key Combinations

Navigation:

• Tab - Move focus forward
• Shift + Tab - Move focus backward

Editing:

• Ctrl + C - Copy
• Ctrl + V - Paste
• Ctrl + X - Cut
• Ctrl + Z - Undo
• Ctrl + Shift + Z - Redo

System:

• Cmd + K - Command palette
• Cmd + / - Quick search
• Escape - Close/Cancel

Styling

The Keyboard component uses Tailwind CSS utility classes:

• Container: Flex layout with gap between keys
• Keys: Rounded corners, border, padding based on size
• Typography: Monospace font for consistency
• Colors: Muted foreground by default, primary for selected state

Size Variants

Variant Styles

• Default: Solid background with border
• Outline: Transparent background with visible border

Accessibility

The Keyboard component includes accessibility features:

• Semantic HTML: Proper structure for screen readers
• ARIA Labels: Can be added with aria-label attribute
• Visual Clarity: High contrast for readability
• Keyboard Focus: Can receive keyboard focus when interactive

Notes

• The component automatically formats key combinations with + symbols
• Platform-specific keys like cmd (macOS) and ctrl (Windows/Linux) are supported
• Multiple keys are displayed with proper spacing
• Monospace font ensures consistent key width
• Use descriptive text alongside keyboard shortcuts for better UX

Next Steps

• Explore Tooltip component
• Learn about Command Palette component
• View Input component