Components
Kbd
A static keyboard key visual for displaying shortcuts.
Installation
- $npx litefy@latest add kbd
- $pnpm dlx litefy@latest add kbd
- $yarn dlx litefy@latest add kbd
- $bun --bun litefy@latest add kbd
Usage
Single keys.
⌘KShiftCtrlAltEnterEsc
import { Kbd } from "@/ui";
export default function KbdBasicDemo() {
return (
<div className="flex w-full max-w-md flex-wrap items-center justify-center gap-2">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd>Shift</Kbd>
<Kbd>Ctrl</Kbd>
<Kbd>Alt</Kbd>
<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
</div>
);
}
Combinations
Group multiple keys to represent shortcuts.
⌘ShiftP
CtrlC
⌘K
import { Kbd } from "@/ui";
export default function KbdCombinationDemo() {
return (
<div className="flex w-full max-w-md flex-col items-center gap-4">
<div className="flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>Shift</Kbd>
<Kbd>P</Kbd>
</div>
<div className="flex items-center gap-1">
<Kbd>Ctrl</Kbd>
<Kbd>C</Kbd>
</div>
<div className="flex items-center gap-1">
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</div>
</div>
);
}
API Reference
Kbd
A static keyboard key visual — non-interactive, with no hover or active states. Border uses the default border token; depth comes from the built-in shadow-subtle.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"kbd"> | - | Supports all native kbd props |