Components
Kbd
A keyboard key visual with pressable hover and active states.
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 keyboard key visual. Radius follows --radius; border and shadow colors come from the --color-neutral and --color-ring theme tokens.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class |
...props | React.ComponentProps<"kbd"> | - | Supports all native kbd props |