Menus & Actions

Interactive Keyboard

클릭과 실제 키 입력 상태를 함께 보여주는 맥 스타일 키보드입니다.

Preview

desktop only

desktop keyboard preview

Desktop preview

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/keyboard.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/keyboard.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/keyboard.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/keyboard.json

typescript

Copied

1import { Keyboard } from "@/components/keyboard"23export default function Example() {4  return <Keyboard showPreview />5}

Type: boolean
Default: false
Description: Reserved hook for adding key sounds without bundling audio assets.

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
showPreview	boolean	false	Whether to show the last pressed key above the keyboard.
enableSound	boolean	false	Reserved hook for adding key sounds without bundling audio assets.
keys	string[]	-	Optional shortcut mode for compact key combinations.
keyClassName	string	-	Classes applied to shortcut keys.