Menus & Actions

Interactive Keyboard

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

Preview

action control

Interactive Keyboard

press keys or click keycaps

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/keyboard.json

Code

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

Props

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
showPreviewbooleanfalseWhether to show the last pressed key above the keyboard.
enableSoundbooleanfalseReserved hook for adding key sounds without bundling audio assets.
keysstring[]-Optional shortcut mode for compact key combinations.
keyClassNamestring-Classes applied to shortcut keys.

Reference

Aceternity Keyboard