---
title: "KBD"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS KBD using semantic HTML for keyboard shortcuts and hotkeys. Multiple sizes for shortcut guides, developer documentation, and UI hints."
url: https://frutjam.com/pl/components/kbd
---
# KBD Component
Kluczowe elementy klawiatury wizualnie reprezentują dane wejściowe z klawiatury, przydatne do dokumentowania skrótów, klawiszy skrótu i nawigacji za pomocą klawiatury. Elementy kbd, zbudowane w oparciu o semantyczny HTML, komunikują działania użytkownika i wzorce interakcji. System Frutjam kbd obsługuje wiele rozmiarów i stylów — idealnie nadaje się do dokumentacji skrótów, nakładek z samouczkami i przewodników po klawiaturze.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
| ------ | ------- | ---------------------------------------------------------- |
| kbd | Opierać | Klawisz klawiatury stylizowany na podwyższoną ramkę i cień |
| kbd-xs | Rozmiar | Bardzo mała (czcionka 0,75 rem) |
| kbd-sm | Rozmiar | Mały (czcionka 0,8125 rem) |
| kbd-md | Rozmiar | Średni (czcionka 0,875 rem, domyślna) |
| kbd-lg | Rozmiar | Duży (czcionka 1rem) |
| kbd-xl | Rozmiar | Bardzo duży (czcionka 1,125 rem) |
## Podstawowe użycie
## Kluczowe kombinacje
```html
Copy:
Ctrl
+
C
Paste:
Ctrl
+
V
Undo:
Ctrl
+
Z
```
## Kluczowe rozmiary
```html
Xs
Sm
Md
Lg
```
## Klucze specjalne
```html
Enter
Tab
Shift
Alt
Esc
Space
```
## Klawisze strzałek
```html
```
## Przewodnik po skrótach klawiaturowych
```html
```