---
title: "KBD"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "키보드 단축키 및 단축키에 시맨틱 HTML을 사용하는 Tailwind CSS KBD. 바로가기 가이드, 개발자 문서, UI 힌트를 위한 다양한 크기."
url: https://frutjam.com/ko/components/kbd
---

# KBD 구성요소

Keyboard key components visually represent keyboard input, useful for documenting shortcuts, hotkeys, and keyboard navigation. Built with semantic HTML, kbd elements communicate user actions and interaction patterns. The Frutjam kbd system supports multiple sizes and styles—ideal for shortcut documentation, tutorial overlays, and keyboard guides.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class  | 타입   | Description                                       |
| ------ | ---- | ------------------------------------------------- |
| kbd    | Base | Keyboard key styled with raised border and shadow |
| kbd-xs | Size | Extra small (0.75rem font)                        |
| kbd-sm | Size | Small (0.8125rem font)                            |
| kbd-md | Size | Medium (0.875rem font, default)                   |
| kbd-lg | Size | Large (1rem font)                                 |
| kbd-xl | Size | Extra large (1.125rem font)                       |

## Basic Usage

## Key Combinations

```html
<div class="space-y-2">
  <div>
    <span class="text-sm">Copy:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">C</kbd>
  </div>
  <div>
    <span class="text-sm">Paste:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">V</kbd>
  </div>
  <div>
    <span class="text-sm">Undo:</span>
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">Z</kbd>
  </div>
</div>
```

## Key Sizes

```html
<kbd class="kbd kbd-xs">Xs</kbd>
<kbd class="kbd kbd-sm">Sm</kbd>
<kbd class="kbd kbd-md">Md</kbd>
<kbd class="kbd kbd-lg">Lg</kbd>
```

## Special Keys

```html
<div class="space-x-2">
  <kbd class="kbd">Enter</kbd>
  <kbd class="kbd">Tab</kbd>
  <kbd class="kbd">Shift</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Esc</kbd>
  <kbd class="kbd">Space</kbd>
</div>
```

## Arrow Keys

```html
<div class="inline-grid grid-cols-3 gap-1">
  <div></div>
  <kbd class="kbd">↑</kbd>
  <div></div>
  <kbd class="kbd">←</kbd>
  <kbd class="kbd">↓</kbd>
  <kbd class="kbd">→</kbd>
</div>
```

## Keyboard Shortcut Guide

```html
<div class="card bg-base-100 shadow-xl max-w-md">
  <div class="card-content">
    <h2 class="card-title text-lg">Keyboard Shortcuts</h2>
    <div class="space-y-2 text-sm">
      <div class="flex justify-between">
        <span>Search</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">K</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>Focus</span>
        <div><kbd class="kbd kbd-sm">/</kbd></div>
      </div>
      <div class="flex justify-between">
        <span>New</span>
        <div><kbd class="kbd kbd-sm">Ctrl</kbd> + <kbd class="kbd kbd-sm">N</kbd></div>
      </div>
    </div>
  </div>
</div>
```