ShadcnStore

Appearance

Shadcn Kbd ​

The shadcn/ui Kbd displays keyboard keys and shortcuts in a consistent styled badge, built with Tailwind CSS v4. It renders the semantic kbd element and groups keys into shortcuts like ⌘K. Kbd appears in menus, tooltips, and command palettes across ShadcnStore app blocks.

Key features ​

  • Semantic kbd element for keyboard input.
  • Group keys into shortcuts with KbdGroup.
  • Consistent styling in menus and tooltips.
  • Scales with surrounding text.
  • Themed for light and dark.

Installation ​

bash
npx shadcn@latest add kbd

Usage ​

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

export function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

Accessibility ​

  • The kbd element conveys that the text is keyboard input; keep it for shortcuts.
  • Pair a visible shortcut with the actual key binding so both match.
  • Do not use kbd purely for styling non-key text.

When to use the Kbd ​

Use Kbd to show a keyboard shortcut next to an action: in a Dropdown Menu item, a Command palette, a Tooltip, or documentation. For inline code that is not a key, use a code element instead.

Used in these blocks ​

Kbd appears inside a Command palette, a Dropdown Menu shortcut, or a Tooltip next to a Button.

FAQ ​

What is the shadcn kbd used for? ​

The Kbd displays keyboard keys and shortcuts, such as ⌘K, in a consistent styled badge, used in menus, tooltips, and command palettes.

How do I show a multi-key shortcut? ​

Wrap several Kbd elements in a KbdGroup to render a shortcut like Ctrl + B.

Is Kbd accessible? ​

It renders the semantic kbd element, so assistive tech announces it as keyboard input.

Where should shortcuts appear? ​

Show them where the action lives: in menu items, tooltips, and command palettes, so users learn the binding in context.

Copyright © 2025-2026 ShadcnStore