Skip to content
werewolf-ui
Components

Kbd

A keyboard shortcut hint rendered as a native kbd element. KbdGroup arranges the separate keys in a shortcut sequence. These components display shortcuts without registering keyboard handlers.

Preview

⌘K

Props

  • size
  • key
import { Kbd, KbdGroup } from "@/components/ui/kbd"

<KbdGroup>
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Usage

When to use

  • Show a keyboard shortcut beside the action it activates.
  • Describe a sequence of keys in instructions.

When not to use

  • An interactive key or action. Use Button.
  • Registering a keyboard shortcut. Add the handler in your application.

Variants

size

Small or medium shortcut hint.

  • ⌘K

    sm

  • ⌘K

    mddefault

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

<KbdGroup>
  <Kbd size="sm" aria-label="Command">⌘</Kbd>
  <Kbd size="sm">K</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

Shortcut sequence

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

<KbdGroup aria-label="Command K">
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Beside an action

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

<Button variant="secondary">
  <span>Open search</span>
  <KbdGroup aria-label="Control K">
    <Kbd size="sm" aria-label="Control">Ctrl</Kbd>
    <Kbd size="sm">K</Kbd>
  </KbdGroup>
</Button>

Do and don't

Do

  • Render each key in its own Kbd and combine keys with KbdGroup.
  • Use readable names for symbols that assistive technology may pronounce ambiguously.

Don't

  • Do not make Kbd clickable or focusable.
  • Do not display a shortcut that the application does not support.

Props

NameTypeValuesDefaultDescription
sizeenumsm | mdmdSmall or medium shortcut hint.

Slots

NameRequiredDescription
childrenyesKey label or shortcut symbol.

Anatomy

PartDescription
rootNative kbd with mono type, sunken fill, neutral border and primary text.
groupInline KbdGroup wrapper with token spacing between keys.

Accessibility

Role: none

  • Kbd is not focusable and does not take keyboard input.
  • Give shortcut symbols readable names, such as aria-label="Command" for ⌘.
  • A displayed shortcut is only a hint. The application owns shortcut handling.

Install

npx shadcn add https://werewolf-ui.vercel.app/r/kbd.json

This also adds styles/werewolf.css, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after @import "tailwindcss", with a path relative to that CSS file (from app/globals.css it is @import "../styles/werewolf.css").