use-command-palette is a headless React hook that gives you everything you need to build a ⌘K command palette state, keyboard navigation, fuzzy search, ARIA attributes, focus management. Every existing library either ships a styled component you have to override, requires a context Provider at the app root, or both. use-command-palette does neither. It's a single `useCommandPalette()` call that returns prop getters you spread onto your own elements.see more
Founder
Screenshots
About
Tired of wrestling with overly prescriptive command palette libraries that force you into their styling conventions or demand a heavy context provider setup polluting your application root? We understand the frustration. That is why we created use-command-palette, a truly headless React hook designed for developers who value ultimate control and minimal overhead. This isn't just another UI component wrapped in a hook; it's the raw logic engine you need to build a lightning-fast, fully accessible command interface exactly how you envision it. Imagine instantly adding that powerful, familiar ⌘K interaction to your application without inheriting a mountain of unwanted CSS or wrestling with complex state management across your entire component tree. use-command-palette strips away all the visual fluff, delivering only the essential functionality: robust state management for your palette, flawless keyboard navigation support, sophisticated fuzzy searching capabilities, and all the necessary ARIA attributes to ensure your feature is accessible right out of the box. It’s pure utility, designed to integrate seamlessly into any existing React architecture, regardless of how complex or minimal your setup currently is.
What sets use-command-palette apart is its commitment to being genuinely headless. Forget fighting against predefined styles or being locked into a specific context provider structure. With a simple invocation of the `useCommandPalette()` hook, you receive a set of meticulously crafted prop getters. These getters are what you spread directly onto your own custom rendered elements—your input field, your list items, your overlay container. This approach gives you 100 percent ownership over the look, feel, and behavior of your command palette, ensuring perfect alignment with your application's design system. Whether you are building a sleek, minimalist productivity tool or a feature-rich dashboard, this hook provides the foundational intelligence needed for smooth, intuitive user interaction. It handles the complex choreography of focus management and search indexing behind the scenes, allowing you to concentrate solely on crafting a beautiful user experience that feels native to your product.
This open-source project is built with zero dependencies, making it incredibly lightweight and easy to audit, ensuring maximum performance and security. It represents a modern philosophy in component design: provide powerful, reusable logic without imposing visual constraints. If you are a developer looking to integrate a powerful, modern command palette experience into your React application quickly, without sacrificing control or bloating your bundle size, use-command-palette is the pragmatic, developer-centric solution you have been searching for. Start building better application navigation today with the power of a truly unopinionated hook.