components / display
Kbd
Show a key or shortcut styled like a keycap.
282 B gzip runs on the server · 0 JS
press Ctrl K to search, or Esc to close.
kbd-default.tsx
import { Kbd } from "@/components/ui/kbd";
export default function KbdDefault() {
return (
<p className="text-muted-foreground text-sm">
press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to search, or <Kbd>Esc</Kbd> to close.
</p>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/kbd.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Kbd } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd> <Kbd>K</Kbd>API
Kbd
A <kbd> that looks like a key. Server component.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |