Kbd
Used to display textual user input from keyboard.
Installation
bash
npx shadcn@latest add @redpanda/kbdbash
pnpm dlx shadcn@latest add @redpanda/kbdbash
yarn dlx shadcn@latest add @redpanda/kbdbash
bunx shadcn@latest add @redpanda/kbdbash
nubx shadcn@latest add @redpanda/kbdbash
aube dlx shadcn@latest add @redpanda/kbdWhen to use
The Kbd component displays keyboard keys and shortcuts in a styled format. Use this decision tree to determine when it’s appropriate:
Usage
tsx
<Kbd> <Command /> +K</Kbd>Anatomy
The Kbd component displays keyboard keys in a styled format. Here’s how the components work together:
tsx
<Kbd> {/* Container styled as a keyboard key */} <Command /> {/* Optional icon (⌘, Ctrl, Shift, etc.) */} +K {/* Key text or combination */}</Kbd>
<KbdGroup> {/* Groups multiple keys together */} <Kbd>⌘</Kbd> <Kbd>K</Kbd></KbdGroup>Layout Structure
- Kbd: Root component with keyboard key styling (border, padding, rounded corners)
- KbdGroup: Flex container that groups multiple Kbd components with proper spacing
Typical Usage Patterns
tsx
// Single key<Kbd>K</Kbd>
// Combination with icon<Kbd><Command /> K</Kbd>
// Multiple keys in sequence<KbdGroup> <Kbd>Ctrl</Kbd> <Kbd>Shift</Kbd> <Kbd>P</Kbd></KbdGroup>
// In button<Button> Search <Kbd className="ml-2">⌘K</Kbd></Button>
// In tooltip<TooltipContent> <p>Search</p> <Kbd><Command /> K</Kbd></TooltipContent>
// In input group<InputGroup> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <Kbd>⌘K</Kbd> </InputGroupAddon></InputGroup>Examples
Default
Group
Use the KbdGroup component to group keyboard keys together.
Button
Use the Kbd component inside a Button component to display a keyboard key inside a button.
Tooltip
You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.
Input Group
You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.
Props
Credits
- We take our inspiration from Shadcn UI for the
kbdcomponent and style.