Save
⌘S
Command palette
CtrlK
Installation
npx logic2b@next add kbdUsage
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>⌘+K
API reference
Generated from the public TypeScript exports in src/ui/kbd.tsx.
Kbd
ComponentProps: React.ComponentProps<"kbd">KbdGroup
ComponentProps: React.ComponentProps<"div">Accessibility contract
Machine-readable behavior and consumer responsibilities for kbd.
- 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.