Skip to content
Logic2BUI

Search docs

Search components and documentation

New
Menu

Kbd

Displays a keyboard shortcut or key combination.

Save
⌘S
Command palette
CtrlK

Installation

npx logic2b@next add kbd

Usage

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

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Usage notes

Both render plain elements (Kbd a <kbd>, KbdGroup a <div>) and forward all native attributes. Use KbdGroup to lay out a multi-key combination.

Examples

In a Button

Key Combinations

Use
CtrlShiftP
to open the command palette.
Press
⌘B
then Esc to toggle the sidebar.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX
<KbdGroup
  className="gap-1"
>
  <Kbd>⌘</Kbd>
  <span
    className="text-xs text-muted-foreground"
  >+</span>
  <Kbd>K</Kbd>
</KbdGroup>

API reference

Generated from the public TypeScript exports in src/ui/kbd.tsx.

View JSON

Kbd

Component
Props: React.ComponentProps<"kbd">

KbdGroup

Component
Props: React.ComponentProps<"div">

Accessibility contract

Machine-readable behavior and consumer responsibilities for kbd.

View JSON
Support
Composition contract
Pattern
keyboard input text
HTML kbd

Built-in semantics

  • Uses the native kbd element so shortcut text is conveyed as keyboard input.

Consumer responsibilities

  • Describe the associated command in nearby text and do not make the shortcut the only way to perform it.