react-keyboards

A simple yet powerful mechanical keyboard component for react with multiple key sounds

Keychron C3 Variant

Apple Magic Keyboard Variant

Installation

Install the package via npm, yarn, or pnpm:

npm install react-keyboards
# or
yarn add react-keyboards
# or
pnpm add react-keyboards

Usage

Simply import the Keyboard component. Styling and styles are injected automatically!

import { Keyboard } from 'react-keyboards';

function App() {
  return (
    <div style={{ width: '100%', maxWidth: '900px' }}>
      <Keyboard 
        variant="keychron-c3" 
        accent="purple" 
        soundPack="topre" 
        soundEnabled={true} 
      />
    </div>
  );
}

export default App;

Props Reference

Prop	Type	Default	Description
variant	"keychron-c3" | "apple-magic"	"keychron-c3"	The structural layout variant of the keyboard.
accent	"teal" | "pink" | "orange" | "purple" | "blue" | "red"	"red"	The highlight color accent applied to special keys (Esc, Enter, Spacebar, active pressed keys).
soundPack	"cherry-blue" | "cherry-brown" | "cherry-red" | "cherry-black" | "topre" | "creams" | "none"	"cherry-blue"	The mechanical switch sound profile to trigger on keypress. Use "none" to mute switch sound.
soundEnabled	boolean	true	Globally toggles sound output.
className	string	undefined	Optional custom CSS class name added to the wrapper element.

Switch Sound Pack Profiles

• cherry-blue: Cherry MX Blue - Clicky and tactile.
• cherry-brown: Cherry MX Brown - Tactile, quiet, and subtle.
• cherry-red: Cherry MX Red - Linear, light, and smooth.
• cherry-black: Cherry MX Black - Linear, heavier spring profile.
• topre: Topre - Thocky, tactile, premium feel.
• creams: NovelKeys Creams - Linear and buttery-smooth.
• none: Silent - No sound output.

License

MIT License. See LICENSE for details.