Kbd

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Kbd

Documentation for the Kbd component.

Installation

bash

deno run -A jsr:@lockness/ui add kbd

Usage

tsx

import { Kbd } from '@lockness/ui/components'

<p>
  Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command palette
</p>

Props

Prop	Type	Default	Description
children	`unknown`	-	Keyboard key content
class	`string`	-	Additional CSS class names
id	`string`	-	Element id attribute
...props	`unknown`	-	Additional HTML attributes

BASIC KEYS

⌘⇧⌥⌃⏎⌫⇥⎋

tsx

import { Kbd } from '@lockness/ui/components'

<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⏎</Kbd>
<Kbd>⌫</Kbd>
<Kbd>⇥</Kbd>
<Kbd>⎋</Kbd>

LETTER KEYS

ABCDEFGHIJKLM

tsx

<Kbd>A</Kbd>
<Kbd>B</Kbd>
<Kbd>C</Kbd>
...

KEYBOARD COMBINATIONS

Copy:⌘+C

Paste:⌘+V

Save:⌘+S

Undo:⌘+Z

Find:⌘+F

tsx

<div class="flex items-center gap-2">
    <span>Copy:</span>
    <Kbd>⌘</Kbd>
    <span>+</span>
    <Kbd>C</Kbd>
</div>

COMPLEX SHORTCUTS

Command Palette:⌘+⇧+P

Force Quit:⌘+⌥+⎋

Screenshot:⌘+⇧+4

tsx

<div class="flex items-center gap-2">
    <span>Command Palette:</span>
    <Kbd>⌘</Kbd>
    <span>+</span>
    <Kbd>⇧</Kbd>
    <span>+</span>
    <Kbd>P</Kbd>
</div>

INLINE WITH TEXT

Press ⌘ + K to open the command menu. Use ↑ and ↓ to navigate, then press ⏎ to select.

tsx

<p>
    Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command menu.
    Use <Kbd>↑</Kbd> and <Kbd>↓</Kbd> to navigate,
    then press <Kbd>⏎</Kbd> to select.
</p>

FUNCTION KEYS

F1F2F3F4F5F6F7F8F9F10F11F12

tsx

<Kbd>F1</Kbd>
<Kbd>F2</Kbd>
...
<Kbd>F12</Kbd>

Edit this page