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. The Keyboard Shortcut system works as a button hotkey enhancer, letting you map keystrokes directly to actions for smoother user experiences. Built for modern Websites and Web Apps, it automatically handles platform differences - converting Ctrl to Cmd on macOS while maintaining Ctrl on Windows/Linux for seamless hotkey integration 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. This instantly converts any element into a key binding button that reacts to shortcut keys.
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. This flexibility allows you to define a shortcut trigger button for links, navigation, or even quick commands.
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. Each mapped key effectively becomes a quick action button, improving usability and speed.
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 the 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 the 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.
Button Hotkey Ready - Any button or element can instantly become keyboard-accessible.
Key Binding Button Control - Assign single keys or modifiers for precise command triggers.
Shortcut Trigger Button - Create powerful shortcuts that activate actions instantly.
Interactive Hotkey Support - Enhance accessibility and interaction with seamless shortcut mapping.
Quick Action Button Functionality - Save time and improve navigation with one-key workflows.
Hotkey Integration Across Platforms - Smart conversion ensures shortcuts feel native everywhere.
Custom Hotkey Button Options - Flexible enough to support advanced or simple shortcuts.
Ready to Use - Zero configuration required, just drop it in and it works.
Universal Compatibility - Supports any element: buttons, cards, frames, or custom components.
4 Key Categories - Numbers, alphabets, symbols, and complex modifier combinations.
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
Why It’s Useful
This component is perfect for non-tech users, accessibility improvements, and creating professional websites with sophisticated keyboard navigation. A custom hotkey button setup makes dashboards, productivity tools, and interactive websites feel faster and smarter. By combining button hotkey functionality, shortcut trigger button setups, and quick action button features with smart hotkey integration, it gives users a frictionless and intuitive way to interact with your project.
Made with ❤️ by Nitso
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
