Kbd

Keyboard key and key-combination display primitives.

Use Kbd to render keyboard shortcuts in docs, toolbars, and menus.

CtrlShiftK
import { KbdGroup, Kbd } from '@tile-ui/react';

export default function KbdDemo() {
	return (
		<KbdGroup>
			<Kbd>Ctrl</Kbd>

Registry install

pnpm dlx shadcn@latest add @tile-ui/kbd

Package usage

import { Kbd } from '@tile-ui/react';
 
<Kbd>Ctrl</Kbd> <Kbd>K</Kbd>

Highlights

  • Single keys and key groups
  • Pairs with Command and Menubar shortcuts

Registry dependencies

ItemPurpose
kbdComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

Kbd

No custom props.

KbdGroup

No custom props.