Keyboard Shortcut
Universal keyboard shortcut component that adds hotkey functionality to any button or element. Supports cross-platform shortcuts with smart Mac/Windows conversion and custom links.
Make it with Workshop
Build your own component with AI
Transform any button or element into a keyboard-accessible powerhouse with this comprehensive shortcut component. Built for modern Website or Web App, it automatically handles platform differences - converting Ctrl to Cmd on macOS while maintaining Ctrl on Windows/Linux for seamless user experience across all devices.
How to Use:
Copy and paste the Keyboard Shortcut component into your Framer project.
Place it as a child element inside any button, frame, or interactive component you want to add keyboard functionality to
Configure your preferred shortcut type using the Key Category dropdown in the properties panel.
Customize the specific key, link behavior, and platform settings through the intuitive control panel.
Test your shortcuts in preview mode - they work instantly without additional setup.
Publish your project and users can immediately start using keyboard shortcuts to trigger actions.
How It Works
The component features 8 intelligent property controllers that work together seamlessly:
Core Shortcut Controls:
Key Category - Choose between Numbers (0-9), Alphabets (A-Z), Safe Symbols, or Universal Shortcuts.
Specific Key Selectors - Dedicated dropdowns for numeric, alphabet, and symbol keys with clear labels.
Universal Shortcut Input - Text field for complex combinations like "ctrl+shift+1" or "ctrl+1" with smart platform conversion.
Link Management Controls:
Use Custom Link Toggle - Switch between button's default link or custom URL navigation.
Custom URL Field - Full Link controller supporting external URLs, internal pages, emails, and phone numbers.
Open in New Tab Toggle - Control whether custom links open in new tabs or current window.
Smart Features:
Cross-Platform Intelligence - Automatically converts "ctrl" to "cmd" on macOS for native feel.
Collision Prevention - Curated safe keys that won't conflict with browser shortcuts.
Key Features
Platform Responsive - Works flawlessly on macOS, Windows, and Linux with automatic platform detection
Ready to Use - Zero configuration required drop it in and it works immediately
Universal Compatibility - Supports any element: buttons, cards, frames, or custom components
4 Key Categories - Numbers, alphabets, symbols, and complex modifier combinations
Cross-Platform Shortcuts - Smart conversion ensures shortcuts feel native on every operating system
Flexible Link Handling - Choose between button's default link or custom URL navigation
Tab Control - Intelligent new tab/current tab behavior for optimal user experience
Browser-Safe Keys - Carefully selected keys that won't interfere with browser functionality
Performance Optimized - Hidden component with minimal DOM footprint and efficient event handling
Properties Control Panel
This component is perfect for non-tech users, accessibility improvements, and creating professional website with sophisticated keyboard navigation. Whether building dashboards, productivity tools, or interactive websites, it adds that extra layer of usability that users love.
