timc1/kbar
Kbar
kbar is a React command palette library that gives applications a searchable overlay for finding and executing commands using the keyboard. It includes keyboard shortcut binding, so users can trigger commands directly without opening the palette, and supports nested sub-menu navigation, allowing actions to be organized into hierarchical groups that can be drilled into and back out of with arrow keys.
The library differentiates itself through a hook-based API that lets any React component register commands and shortcuts declaratively, alongside a global keyboard listener that handles palette activation and shortcut dispatching from a single point. It maintains an action history stack for smooth navigation between menu levels, and applies priority-based sorting so frequently used commands surface earlier in search results. State is shared across the component tree via React Context, enabling all descendants to read and update the palette without prop threading.
Features
- Command Palettes - Allows searching for and executing commands directly within the palette's search interface.
- Action Palettes - Provides a text-searchable menu that displays commands and actions filtered by user input.
- Command Palettes - Adds a searchable, keyboard-triggered command palette to React apps for quick navigation and actions.
- Keyboard-Driven Workflows - Enables keyboard-first interaction patterns for power users to speed up common tasks like command execution.
- React Hook Registrations - Provides React hooks for declaratively registering commands and shortcuts from any component.
- Command Palette Context Stores - Shares command palette state across the component tree using React Context, eliminating prop threading.
- Direct Keystroke Bindings - Binds keystrokes to command callbacks, enabling actions to be triggered without opening the palette.
- Global Shortcut Listeners - Attaches a global keydown listener to intercept shortcuts and toggle the command palette.
- Keyboard Shortcuts - Maps key combinations to application commands, enabling execution without opening the palette.
- Hierarchical Action Navigations - Organizes actions into nested groups with keyboard-driven navigation between levels and back-navigation support.
- Hierarchical Command Menus - Provides a hierarchical menu structure with drill-in sub-menus and back-key navigation.
- Command Palette Components - Ships an interactive overlay React component for searching and executing commands with keyboard navigation.
- Action History Stacks - Ships an action history stack for hierarchical drill-down and back navigation within the command palette.
- Command Priority Sortings - Orders commands by a user-defined priority field so frequently used actions appear first in search results.
- Command Name Matchings - Filters the visible command list by matching user input against command names and keywords.
- Action Group Navigations - Navigates hierarchical action menus using keyboard arrows and back keys, similar to a sub-menu system.
- Command Palettes - Fast and extensible command interface.
- Specialized Components - Fast, portable, and extensible cmd+k interface for your site
- UI Components - Command palette interface for web apps.
