Yogi Prasetya

Interactive Playground

Type with the on-screen keys or your hardware keyboard. Shift, Caps Lock, and the number layer change the available characters.

Installation

Add the Virtual Keyboard component to your Next.js project via the shadcn CLI or manual file installation.

Configure the named registry once in components.json, then install with the alias.

pnpm dlx shadcn@latest add https://yogiprasetya.com/r/virtual-keyboard.json

Usage

Import VirtualKeyboard and control it with local text state.

app/message-editor.tsx

'use client';

import { useRef, useState } from 'react';
import { Textarea } from '@/components/ui/textarea';
import { VirtualKeyboard } from '@/components/virtual-keyboard/virtual-keyboard';

export function MessageEditor() {
  const [message, setMessage] = useState('');
  const inputRef = useRef<HTMLTextAreaElement>(null);

  return (
    <div className="w-full space-y-3">
      <Textarea
        ref={inputRef}
        aria-label="Text input for virtual keyboard"
        value={message}
        onChange={(event) => setMessage(event.target.value)}
        placeholder="Write a message"
        rows={3}
      />
      <VirtualKeyboard value={message} onChange={setMessage} inputRef={inputRef} />
    </div>
  );
}

Composition

Internal structural decomposition and modular sub-component hierarchy.

VirtualKeyboard
- VirtualKeyboardCharKey
  - Button
- VirtualKeyboardActionKey

VirtualKeyboardProps

Complete API reference for properties accepted by the VirtualKeyboard component.

Prop	Type	Default	Description
`value`required	`string`	—	Controlled text edited by the keyboard.
`onChange`required	`(value: string) => void`	—	Called when a keyboard key edits the text.
`inputRef`	`RefObject<HTMLTextAreaElement \| null>`	—	Ref to the demo-owned textarea used for caret-aware editing.
`disabled`	`boolean`	—	Disables all keys.
`className`	`string`	—	Additional classes applied to the keyboard wrapper.