Learn more about Mintlify
Enter your email to receive updates about new features and product releases.
Display keyboard keys and shortcuts with proper styling.
npm install @soft-ui/react
import { Kbd, KbdGroup } from "@soft-ui/react/kbd"
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
// Or as a group
<KbdGroup keys={["⌘", "K"]} />
tertiary: Light background (default)inverted: Dark background with white text<Kbd>Esc</Kbd>
<Kbd>Enter</Kbd>
<Kbd>⌘</Kbd>
<div className="flex items-center gap-2">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</div>
<KbdGroup keys={["⌘", "K"]} />
<KbdGroup keys={["Ctrl", "Shift", "P"]} />
<KbdGroup keys={["↑", "↓"]} />
<div className="bg-content-strong p-4 rounded">
<KbdGroup keys={["⌘", "K"]} variant="inverted" />
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span>Search</span>
<KbdGroup keys={["⌘", "K"]} />
</div>
<div className="flex items-center justify-between">
<span>Save</span>
<KbdGroup keys={["⌘", "S"]} />
</div>
<div className="flex items-center justify-between">
<span>Undo</span>
<KbdGroup keys={["⌘", "Z"]} />
</div>
<div className="flex items-center justify-between">
<span>Copy</span>
<KbdGroup keys={["⌘", "C"]} />
</div>
</div>
<div className="flex items-center gap-2">
<span>Navigate</span>
<KbdGroup keys={["↑", "↓", "←", "→"]} />
</div>
<p className="flex items-center gap-2">
Press <KbdGroup keys={["⌘", "K"]} /> to open the command palette
</p>
<div className="flex flex-wrap gap-2">
<Kbd>⌘</Kbd>
<Kbd>⌥</Kbd>
<Kbd>⇧</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⏎</Kbd>
<Kbd>⌫</Kbd>
<Kbd>⇥</Kbd>
<Kbd>⎋</Kbd>
</div>