Components

Kbd

Keyboard key and shortcut chips: Barlow Condensed capitals in a 1px ink rule.

Press CtrlK to search the archive.

Install

bash

npx shadcn add @eloquent/kbd

Usage

tsx

import { Kbd, KbdGroup } from "@/components/ui/kbd";

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<Kbd><CornerDownLeftIcon aria-hidden="true" /><span className="sr-only">Enter</span></Kbd>

States

EscCtrlShiftPArrow upEnter

State	Treatment
Default	Barlow Condensed 700 capitals, tabular figures, 1px ink rule, paper fill
Hover, press, focus	None. `Kbd` is not interactive and is never a tab stop
Disabled	Not applicable
Icon key	Lucide icon in ink, `aria-hidden`, plus visually hidden text (`sr-only`); `aria-label` is not allowed on `<kbd>`

Keyboard

Kbd is a label for keys, not a control.

Key	Action
Tab / Shift+Tab	Skips `Kbd`; focus stays on real controls

Vietnamese

Nhấn CtrlK để tìm trong kho lưu trữ, hoặc Esc để đóng.

Ink adaptation

Upstream shadcn's muted fill, rounded corners and shadow are removed. A 1px ink rule and Barlow Condensed capitals replace them. Built on the native <kbd> element; there is no Base UI part.