Kbd

Copy<Kbd>⌘</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>

Copy<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
 
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

Copyimport { Command } from "lucide-react";
 
<Kbd>
  <Command />
</Kbd>

Copy<p className="text-sm">
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command menu.
</p>

Copyimport {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
 
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon">
      <Search />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    Search
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  </TooltipContent>
</Tooltip>

Copyimport { Kbd, KbdGroup } from "@/components/ui/kbd";
 
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Copy# Mint — Kbd Specs
 
## Component
- name: kbd
- file: registry/mint/kbd.tsx
- installs to: components/ui/kbd.tsx
- dependencies: none (only @/lib/utils)
- registryDependencies: none
- GIN Design exclusive (not in shadcn/ui)
 
## What is it
A styled `<kbd>` element for rendering individual keyboard keys and multi-key
shortcuts with a pressed-key appearance. Use `Kbd` for a single key and wrap
multiple `Kbd` elements in `KbdGroup` for shortcuts. Do not use it as an
interactive control — it is purely decorative and non-focusable.
 
## Visual identity
Compact monochrome pill with a subtle inset shadow that mimics a physical
keycap. Light mode uses a translucent black tint; dark mode flips to a
translucent white tint. Rounded-sm corners and tight x-padding give a
dense, inline feel that sits comfortably inside body text or tooltips.
 
## Design tokens
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155)  — key label text
bg-black/5 (light) / bg-white/10 (dark)                  — keycap fill (raw alpha, not a CSS var)
shadow-black/10 (light) / shadow-white/10 (dark)          — inset keycap shadow (raw alpha)
 
Tooltip context overrides (in-data-[slot=tooltip-content]:):
bg-white/20 (light) / bg-black/10 (dark)                  — inverted fill inside tooltip
--background (via text-background, light)                  — inverted label colour inside tooltip
shadow-white/20 (light) / shadow-black/10 (dark)           — inverted shadow inside tooltip
 
## Sub-components
- Kbd      → renders a single `<kbd>` keycap; accepts text, symbols, or one Lucide icon
- KbdGroup → renders a `<kbd>` wrapper with `inline-flex items-center gap-1`; groups multiple Kbd elements for a shortcut
 
## States
- tooltip-context: automatically inverts fill, text, and shadow when nested inside a `TooltipContent` (detected via `in-data-[slot=tooltip-content]:` ancestor selector) — no extra props required
 
## Conventions
- Kbd is `pointer-events-none` and `select-none` — it is decorative, never interactive
- Icons inside Kbd auto-size to `size-3` (12 px) unless the icon already has a `size-*` class
- For screen-reader accessibility, add an `aria-label` or visually-hidden description on the containing element to convey the shortcut semantically
- Sub-components expose `data-slot="kbd"` and `data-slot="kbd-group"` for CSS targeting
- KbdGroup renders as a `<kbd>` element with its children as `inline-flex`, giving correct HTML semantics for grouped shortcuts
- Prefer `KbdGroup` over placing bare `Kbd` elements side-by-side when conveying a multi-key shortcut