Browse components
Kbd
Keyboard keys drawn as 3D keycaps that physically sink when the matching key is pressed, plus a group for shortcuts.
Installation
npx shadcn@latest add @glint-ui/kbdFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/kbd.json
Usage
import { Kbd } from "@/components/ui/kbd";
<KbdGroup separator="+">
<Kbd>Mod</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
<Kbd size="sm">Esc</Kbd>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Keycap size. |
| listen | boolean | true | Animate a press when the matching physical key goes down. |
| match | ReactNode | — | KeyboardEvent.key to react to. Defaults to the text ("⌘", "Shift", "Esc", "Mod" = ⌘ on Mac, Ctrl elsewhere). |
| pressed | ReactNode | — | Force the pressed look (boolean). |
| children | ReactNode | — | Key label. KbdGroup takes Kbd children and an optional separator. |
| className | string | — | Extra classes for the root element. |