Kbd
A component for displaying keyboard keys and shortcuts.
Kbd renders a <kbd> for a single key and KbdGroup groups keys into a
shortcut; both mark themselves with data-slot.
Installation
npx shadcn@latest add @kosori/kbdExample
kbd-example.tsx
Single keys:
K⌘⌃⇧
Key combinations:
⌘K⌘ShiftPCtrlAltDelete
import { Kbd, KbdGroup } from '@/components/ui/kbd';
const KbdExample = () => (
<div className='flex flex-col gap-4'>
<div>
<p className='mb-2 text-muted-foreground text-sm'>Single keys:</p>
<div className='flex gap-2'>
<Kbd>K</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⇧</Kbd>
</div>
</div>
<div>
<p className='mb-2 text-muted-foreground text-sm'>Key combinations:</p>
<div className='flex gap-2'>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>Shift</Kbd>
<Kbd>P</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>Alt</Kbd>
<Kbd>Delete</Kbd>
</KbdGroup>
</div>
</div>
</div>
);
export default KbdExample;
Usage
import { Kbd, KbdGroup } from '@/components/ui/kbd';
const KbdDemo = () => (
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
);