# Keycap keyboard

Mechanical keycaps that sink and light up as you type, with the text above the board.

- ID: `keycap-keyboard`
- Import: `animui/keycap-keyboard`
- Category: Special
- Runtime exports: `KeycapKeyboard`
- Declaration: `types/pro/keycap-keyboard.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: shortcut-recorder, command-palette, hold-to-confirm

```tsx
import { KeycapKeyboard } from 'animui/keycap-keyboard';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info keycap-keyboard` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface KeycapKeyboardProps {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  layout?: "compact" | "letters";
  rows?: string[][];
  maxLength?: number;
  listen?: "focus" | "window";
  placeholder?: string;
  showOutput?: boolean;
  label?: string;
  className?: string;
}

export declare const KeycapKeyboard: ComponentType<KeycapKeyboardProps>;

export default KeycapKeyboard;
```