Tactile Keyboard

Pro

A 65% QWERTY board with real key travel, live shift legends, and five colorways.

css 3d3dcsskeyboardkeystactilehover

Overview

Tactile Keyboard is a React and Tailwind CSS 65 percent mechanical keyboard with real key travel, in Next.js or any React app, with no dependencies. Caps float above visible switch housings and press down onto them, shift legends update live, and the board scales fluidly with container query units instead of media queries. Switch sound is synthesized in the Web Audio API from filtered noise in thock, click, or linear profiles, so there is no audio file to host. Five colorways, tilt, and travel are props, it can mirror your real keyboard, and listeners pause off screen.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add tactile-keyboard

Usage

Import TactileKeyboard from @/components/wensity/tactile-keyboard and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { useState } from "react";
 3import { TactileKeyboard } from "@/components/wensity/tactile-keyboard";
 4
 5export default function Example() {
 6  const [typed, setTyped] = useState("");
 7
 8  return (
 9    <TactileKeyboard
10      theme="graphite"
11      tilt={11}
12      travel={4}
13      onKeyPress={(event) => {
14        if (event.code === "Backspace") setTyped((t) => t.slice(0, -1));
15        else if (event.code === "Space") setTyped((t) => t + " ");
16        else if (event.legend.length === 1) setTyped((t) => t + event.legend);
17      }}
18    />
19  );
20}

Props

Prop	Type	Default	Description
`theme`	"graphite" \| "glacier" \| "ivory" \| "ember" \| "moss"	"graphite"	Keycap and case colorway.
`tilt`	number	11	Forward tilt of the case in degrees, clamped to 0–20.
`travel`	number	4	Key travel distance in pixels, clamped to 1–10.
`physicalKeys`	boolean	true	Mirror real keyboard events onto the board.
`accentKeys`	boolean	true	Paint Esc and Enter in the colorway's accent tone.
`sound`	boolean	true	Play a synthesized switch sound on press and release. No audio file to host.
`soundProfile`	"thock" \| "click" \| "linear"	"thock"	Switch sound character. Wide caps ring lower, and every press is slightly detuned.
`volume`	number	0.45	Sound volume from 0 to 1.
`onKeyPress`	(event: TactileKeyPressEvent) => void	-	Fires once per key-down, from on-screen or physical input.

Featured in React 3D components.