General

Kbd

Render keyboard keys with platform-aware symbol conversion. Supports special keys like Command, Shift, and arrow keys with automatic symbol display.

Playground

Experiment with different props in real-time.

K

Value

Variant

Size

Color

Basic Usage

Use the value prop to display a key. Special keys are automatically converted to symbols.

K ⇧ ⌘ ↵

<script lang="ts">
  import { Kbd } from 'sv5ui';
</script>

<Kbd value="K" />
<Kbd value="shift" />
<Kbd value="command" />
<Kbd value="enter" />

Variants

4 visual styles.

K outline

K solid

K soft

K subtle

<Kbd value="K" variant="outline" />
<Kbd value="K" variant="solid" />
<Kbd value="K" variant="soft" />
<Kbd value="K" variant="subtle" />

Sizes

3 sizes available.

K SM

K MD

K LG

<Kbd value="K" size="sm" />
<Kbd value="K" size="md" />
<Kbd value="K" size="lg" />

Colors

7 color schemes.

KKKKKKK

<Kbd value="K" color="surface" />
<Kbd value="K" color="primary" />
<Kbd value="K" color="secondary" />
<Kbd value="K" color="success" />
<Kbd value="K" color="warning" />
<Kbd value="K" color="error" />
<Kbd value="K" color="info" />

Keyboard Shortcuts

Compose multiple keys to display shortcuts.

⌘ + K

+ ⇧ + P

+ ↵

<!-- Common shortcuts -->
<div class="flex items-center gap-1">
  <Kbd value="command" /> + <Kbd value="K" />
</div>

<div class="flex items-center gap-1">
  <Kbd value="ctrl" /> + <Kbd value="shift" /> + <Kbd value="P" />
</div>

<div class="flex items-center gap-1">
  <Kbd value="alt" /> + <Kbd value="enter" />
</div>

Special Keys

Special key names are automatically converted to their symbols. Platform-aware keys (meta, ctrl, alt) adapt to macOS vs other platforms.

⌘ command

⇧ shift

⌥ option

⌃ control

meta

ctrl

alt

↵ enter

⌫ backspace

⌦ delete

⇥ tab

Esc escape

␣ space

⇪ capslock

↑ arrowup

↓ arrowdown

← arrowleft

→ arrowright

⇞ pageup

⇟ pagedown

↖ home

↘ end

<!-- Modifier keys -->
<Kbd value="command" />  <!-- ⌘ -->
<Kbd value="shift" />    <!-- ⇧ -->
<Kbd value="option" />   <!-- ⌥ -->
<Kbd value="control" />  <!-- ⌃ -->

<!-- Platform-aware keys (auto-detect macOS vs other) -->
<Kbd value="meta" />     <!-- macOS: ⌘, Other: Ctrl -->
<Kbd value="ctrl" />     <!-- macOS: ⌃, Other: Ctrl -->
<Kbd value="alt" />      <!-- macOS: ⌥, Other: Alt -->

<!-- Action keys -->
<Kbd value="enter" />    <!-- ↵ -->
<Kbd value="backspace" /> <!-- ⌫ -->
<Kbd value="delete" />   <!-- ⌦ -->
<Kbd value="tab" />      <!-- ⇥ -->
<Kbd value="escape" />   <!-- Esc -->
<Kbd value="space" />    <!-- ␣ -->
<Kbd value="capslock" /> <!-- ⇪ -->

<!-- Arrow keys -->
<Kbd value="arrowup" />    <!-- ↑ -->
<Kbd value="arrowdown" />  <!-- ↓ -->
<Kbd value="arrowleft" />  <!-- ← -->
<Kbd value="arrowright" /> <!-- → -->

<!-- Navigation keys -->
<Kbd value="pageup" />   <!-- ⇞ -->
<Kbd value="pagedown" /> <!-- ⇟ -->
<Kbd value="home" />     <!-- ↖ -->
<Kbd value="end" />      <!-- ↘ -->

useKbd Hook

Try these shortcuts on your keyboard:

Enabled

+ K Search

+ S Save

Esc Close

+ ⇧+ P Command Palette

Pressed: none

Basic usage: register shortcuts with callback handlers

<script lang="ts">
  import { useKbd } from 'sv5ui';

  const { isPressed } = useKbd({
    shortcuts: {
      'ctrl+k': () => openSearch(),
      'meta+s': () => save(),
      'escape': () => close()
    },
    preventDefault: true,  // Prevent default browser behavior
    repeat: false           // Ignore held-down key repeats
  });
</script>

Advanced: dynamic enable/disable, custom target, isPressed() reactive check

<script lang="ts">
  import { useKbd } from 'sv5ui';

  let enabled = $state(true);

  const { isPressed, pressedKeys } = useKbd({
    shortcuts: {
      'ctrl+shift+p': () => openCommandPalette(),
      'ctrl+b': () => toggleSidebar()
    },
    enabled: () => enabled,     // Dynamically enable/disable
    target: () => document.body, // Custom event target
    captureModifiers: false      // Don't capture modifier-only presses
  });
</script>

<!-- Check if a key is currently pressed -->
{#if isPressed('ctrl')}
  <p>Ctrl is held down</p>
{/if}

useKbd Options

Option	Type	Default	Description
`shortcuts`	`Record<string, Function>`	`-`	`Map of key combos to handler functions`
`target`	`HTMLElement \| Window`	`window`	`DOM element to listen on`
`enabled`	`boolean \| () => boolean`	`true`	`Enable/disable all shortcuts`
`preventDefault`	`boolean`	`true`	`Prevent default browser behavior`
`captureModifiers`	`boolean`	`false`	`Capture modifier-only key presses`
`repeat`	`boolean`	`false`	`Allow held-down key repeats`

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`base`	`Root kbd element — controls shape, padding, colors`

Props

Prop	Type	Default	Description
`value`	`string`	`-`	`Key to display. Special keys auto-convert to symbols`
`variant`	`'solid' \| 'outline' \| 'soft' \| 'subtle'`	`'outline'`	`Visual style`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	`Dimensions and text size`
`color`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'surface'`	`'surface'`	`Color scheme`
`as`	`keyof HTMLElementTagNameMap`	`'kbd'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root DOM element`
`class`	`string`	`-`	`Additional CSS classes on root element`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Link ThemeModeButton