Skip to content
txbrendan/ui

Kbd

beta

A keyboard key, shown as a small label with a border, or as quiet text inside a field, with a group part for key combinations.

Preview

size

EscEscEsc

one letter

KKK

emphasis

EscEscCtrlK

group

Ctrl+KCtrl+Shift+PCommand+Enter

in text

Press Esc to close, or Ctrl+Enter to send.

in a list

  • SearchCtrl+K
  • New fileCtrl+N

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the component.

    npx shadcn@latest add @txbrendan/kbd

Use it for

  • Showing which key to press, in help text, menus, tooltips, and empty states.
  • Use KbdGroup for a combination, with one Kbd per key and a + between them.
  • Write the key the way it is printed on the keyboard: Ctrl, Shift, Enter, Esc.
  • Use size to match the text around it: sm in small print, md beside text-sm, lg beside text-base.
  • Use emphasis="ghost" for a shortcut hint inside a field, like a search box, where a bordered key would look like a second control.

Avoid it for

  • Making a key clickable. A Kbd is a label. Put the action on a Button.
  • Printing a key beside a button on the page. Teach it in the button's tooltip with TooltipPopup's shortcut prop.
  • Putting aria-label on a Kbd. A <kbd> has no role, so ARIA does not allow a label on it. Use visually hidden text instead.
  • Showing a shortcut that does not work on the person's platform. Show Ctrl or ⌘ to match their system.
  • Code or file names. Use <code> for those.

Props

  • emphasis

    solid draws a border and a fill. ghost shows only the text, at the same size.

    "solid" | "ghost" · default "solid"

  • size

    Height, width, and text size. Density scales them.

    "sm" | "md" | "lg" · default "md"

  • className

    Extra classes. Later classes win, so className='rounded-full' replaces the radius.

    string

  • Kbd

    One key. Renders a <kbd>. At least as wide as it is tall, so one letter makes a square key.

    Omit<ComponentProps<"kbd">, "color">

  • KbdGroup

    Part. Holds the keys of one combination. Renders a <kbd>, as HTML asks for key combinations.

    Omit<ComponentProps<"kbd">, "color">

  • kbdVariants

    The key's classes, for styling another element as a key.

    ({ emphasis, size }) => string

Accessibility

  • Renders a native <kbd>. Screen readers read its text, so the text must say the key.
  • Screen readers may read symbols badly or skip them. For ⌘, ⌥, or ⇧, hide the symbol with aria-hidden and add the key name in a span with className='sr-only'.
  • Never put aria-label on a Kbd. A <kbd> has no role, so ARIA does not allow a label on it, and screen readers may skip it.
  • Write a + between keys in a KbdGroup, so the text itself says the keys go together.
  • Not focusable and not interactive. It adds no tab stop.
  • Solid text is muted-foreground on muted. Ghost text is muted-foreground on what is behind it. The theme tests hold muted-foreground to 4.5:1 on muted, background, card, and popover, in light and dark.

Examples

One key in a sentence

<p className="text-sm text-muted-foreground">
  Press <Kbd>Esc</Kbd> to close.
</p>

A key combination

<KbdGroup>
  <Kbd>Ctrl</Kbd>+<Kbd>K</Kbd>
</KbdGroup>

A symbol key with a name screen readers can read

<KbdGroup>
  <Kbd>
    <span aria-hidden>⌘</span>
    <span className="sr-only">Command</span>
  </Kbd>
  +<Kbd>K</Kbd>
</KbdGroup>

A quiet hint inside a field

<Kbd emphasis="ghost" aria-hidden>/</Kbd>

A shortcut beside a menu action

<div className="flex items-center justify-between gap-4 text-sm">
  <span>Search</span>
  <KbdGroup>
    <Kbd size="sm">Ctrl</Kbd>+<Kbd size="sm">K</Kbd>
  </KbdGroup>
</div>