MacBook Keyboard

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @gammaui/macbook-keyboard
Copy

Usage

import { MacBookKeyboard } from "@/components/gammaui/macbook-keyboard"
 
export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <MacBookKeyboard />
    </div>
  )
}

Examples

Default Keyboard

<MacBookKeyboard />

Custom Glow Color

<MacBookKeyboard glowColor="#3b82f6" transparentKey={true} />

Solid Background Keys

<MacBookKeyboard transparentKey={false} keySize={45} />

Larger Keys

<MacBookKeyboard keySize={50} glowColor="#10b981" />

Props

Features

• ✔ Real-time keyboard detection - Responds to physical keyboard presses
• ✔ Animated key borders - Subtle pulsing animation on each key
• ✔ Custom glow effects - Customizable color for pressed keys
• ✔ Full keyboard layout - Complete MacBook keyboard including function keys
• ✔ Touch ID sensor - Visual representation of fingerprint sensor
• ✔ Arrow key cluster - Authentic MacBook arrow key layout
• ✔ Responsive design - Scales beautifully across different screen sizes
• ✔ Motion animations - Smooth enter animations with staggered delays
• ✔ Dark mode optimized - Looks great in both light and dark themes
• ✔ Customizable styling - Transparent or solid key backgrounds

Component Architecture

The MacBook Keyboard component consists of several sub-components:

Main Components

MacBookKeyboard - The main container component that manages keyboard state and renders all key rows.

IconKeyboardKey - Individual key component that renders standard keys with optional icons and text.

FingerPrintKey - Special component for the Touch ID sensor key.

ArrowKeys - Composite component that renders the arrow key cluster with proper MacBook layout.

ArrowKey - Individual arrow key component with directional icons.

Key Mapping

The component includes a comprehensive key mapping system that translates browser keyboard events to visual key presses:

const keyMap: Record<string, string> = {
  Escape: "esc",
  Enter: "return",
  Meta: "command",
  Alt: "option",
  Shift: "shift",
  Control: "control",
  // ... and more
}

This allows the component to accurately highlight keys when they're pressed on your physical keyboard.

Styling

The component uses Tailwind CSS utility classes and custom styling for the authentic MacBook look:

// Gradient borders with animation
border: "1px solid #212121"
borderTop: "1.5px"
borderBottom: "0.1px"
 
// Inset shadow for depth
boxShadow: "inset 0px 0px 15px rgba(0,0,0,0.2)"
 
// Glow effect on press
textShadow: `0 0 10px ${glowColor}`
filter: `drop-shadow(0 0 8px ${glowColor})`

Animation Details

Border Pulse Animation

Each key features a subtle border color animation:

variants={{
  initial: { borderColor: "#212121" },
  animate: {
    borderColor: ["#212121", "#383838", "#212121"],
  },
}}

Staggered Enter Animation

Keys animate in with a staggered delay based on their position:

transition={{
  duration: 0.8,
  delay: index * 0.1 + rowIndex * 0.12,
}}

Accessibility

• Keyboard Navigation: Full support for keyboard interaction
• Visual Feedback: Clear visual indication of pressed keys
• Color Contrast: Optimized for readability in both light and dark modes
• Non-intrusive: Doesn't interfere with normal keyboard functionality

When to Use

• Developer Portfolios - Showcase your attention to detail
• Keyboard Shortcut Documentation - Visualize keyboard shortcuts
• Interactive Tutorials - Teach users keyboard shortcuts
• Product Demos - Demonstrate keyboard-driven applications
• Landing Pages - Eye-catching hero sections for dev tools
• Documentation Sites - Interactive command references
• UI/UX Showcases - Display keyboard interaction design

Browser Compatibility

The component works across all modern browsers that support:

• CSS Animations
• Framer Motion
• Keyboard Events API
• CSS Custom Properties

Performance

• Optimized with React.memo - Prevents unnecessary re-renders
• Efficient event listeners - Single keyboard listener for all keys
• CSS-based animations - Hardware-accelerated animations
• Minimal re-renders - Only updates when keys are pressed

Customization Tips

Change Key Layout

Modify the keysData array to customize the keyboard layout:

const customKeysData = [
  firstRowData,
  secondRowData,
  // Add or remove rows
]

Add Custom Keys

Create new key objects with custom icons and text:

{
  icon: <YourIcon size={12} />,
  text: "Custom",
  className: "custom-styling"
}

Modify Animations

Adjust animation timing in the component:

transition={{
  duration: 1.2,  // Slower animation
  delay: index * 0.15,  // More stagger
}}

Troubleshooting

Keys not responding to keyboard input?

• Ensure the component is mounted and visible
• Check that no other element is capturing keyboard events

Glow effect not visible?

• Verify the glowColor prop is a valid CSS color
• Check that the key text matches the keyMap values

Animation performance issues?

• Reduce keySize prop for better performance
• Consider disabling animations on low-end devices

Credits

Built with:

• Framer Motion - Animation library
• Lucide React - Icon system
• Tailwind CSS - Styling framework