Keycap keyboardPro
Mechanical keycaps that sink and light up as you type, with the text above the board.
Live · keyboard ready
Type anything
- Landing pages for keyboard-first products and developer tools.
- Onboarding that teaches shortcuts by lighting the keys they use.
- Playful empty states and easter eggs.
- Form input; use a real text field.
- On-screen keyboards for accessibility needs; use the platform's.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { KeycapKeyboard } from "@/components/arc/keycap-keyboard/keycap-keyboard"; export function TypeToTry() { return <KeycapKeyboard listen="window" placeholder="Type anything" />;} // Letters only<KeycapKeyboard layout="letters" /> // A four key macro pad<KeycapKeyboard rows={[["a", "r", "c", "backspace"]]} showOutput={false} />KeycapKeyboard
A board of sculpted mechanical keycaps. Physical typing and clicks press the matching cap into its housing, bloom a faint light under it, and add the character to a wrapping text area above the board.
PropTypeDefaultDescription
valuestring–Controlled text.defaultValuestring""Initial text when uncontrolled.onValueChange(value: string) => void–Called with the new text after every key.layout"compact" | "letters""compact"Compact is a full 60% board with numbers, punctuation, and modifiers. Letters is three letter rows with shift, delete, and a space bar.rowsstring[][]–Custom rows that override layout. Single characters, plus "space", "backspace", "enter", "shift", "tab", and "caps".maxLengthnumber280Longest text kept. Older characters drop off the start.listen"focus" | "window""focus"Where physical keys are heard. "window" listens across the page but ignores other text fields and shortcuts with Command, Control, or Alt.placeholderstring"Start typing"Shown while the text is empty.showOutputbooleantrueHides the typed text area when you render the value yourself.labelstring"Keyboard"Accessible name for the board.classNamestring–Extra class on the root.- Any printable key
- Types the character and holds the matching cap down while the key is held. Caps match on physical position, so every layout lights the right cap.
- Backspace
- Deletes the last character; holding it repeats.
- Enter
- Starts a new line.
- Shift, Tab, Caps, modifiers
- Light their caps. Tab still moves focus.
- Tab to a cap, then EnterorSpace
- Presses that cap as a button. Shift latches for the next character.
- Every cap is a real button named by its character or function (Space, Delete, Return, Shift).
- The typed text is a read-only, multiline textbox named Typed text; focusing it lets physical keys type in focus mode.
- Shortcuts with Command, Control, or Alt pass through untouched, and window mode never captures keys typed into other fields.
- A cap drops 92% of its travel in 35ms on key down and returns in 200ms with a small lift past rest, so each press feels crisp.
- A faint light blooms on the board under the cap and fades over 700ms; fast typing leaves a soft trail.
- The caret holds still while you type and starts blinking again after 600ms idle. New characters fade in over 140ms.
- Reduced motion removes cap travel, character fades, and the blink; the light and legend color still respond.
- One size unit comes from a container query so the widest row always fits, from 320px up to a 54px cap on wide screens.
- Travel, gaps, corner radii, and legends all scale from the same unit.
- Taps press caps on touch down; pointer capture keeps a cap down until the finger lifts.
- Caps are memoized with stable props and never re-render while typing; a press flips one data attribute on one button.
- One native keydown and keyup listener on the window or the board. No layout reads on the key path.
- Travel and light are CSS transitions on transform and opacity only. A burst of 15 keys a second holds 16.7ms frames.
- The text area stays pinned to its newest line through column-reverse layout, with no scroll code.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it as a playful hero or a try-it moment: keyboard-first products, typing tests, launch pages.
- listen="window" makes the page feel alive immediately; use "focus" when other inputs share the page.
- Pass rows to build a macro pad or a single word, such as [["a", "r", "c"]].
- It is not a replacement for a real text field in forms.
The full library index for assistants is at /llms.txt.