Repolode
Submit
timc1

timc1/kbar

A React command-palette (Cmd+K) component for adding a searchable action menu with keyboard shortcuts to a website.

View on GitHubWebsite
Stars
5,261
Forks
204
Open issues
0
Last commit
3 months ago

What is it?

kbar is a React component library for adding a command palette, the Cmd+K style menu, to a website or web app. Users press a shortcut to open a search box and run any action that would otherwise require clicking through the interface.

You define actions as plain objects with an id, name, keywords, optional keyboard shortcut, and a perform function. A single KBarProvider wraps the app, and the library ships with unstyled-by-default UI pieces such as a portal, positioner, animator, search input, and results list. Hooks like useMatches return filtered results based on the current query, and the results list is virtualized for large action sets.

The project also supports nested actions for multi-step navigation, undo and redo through action history, and screen reader support. Components can be customized or replaced entirely using the underlying data structure.

Key features

  • 01Keyboard shortcuts can be registered for individual actions.
  • 02Nested actions support multi-step navigation.
  • 03Virtualized results list for large numbers of actions.
  • 04Undo and redo through action history.
  • 05Built-in animations and customizable components.
  • 06Built-in screen reader support.

Use cases

  • Adding a Cmd+K search and navigation menu to a React documentation or content site.
  • Letting users trigger app actions from the keyboard in a SaaS dashboard.
  • Building a quick-jump menu for pages and settings in a web app.

Quick start

  1. 1

    Install kbar from npm

    npm install kbar
  2. 2

    Wrap your app with KBarProvider and add the UI components

  3. 3

    Press cmd+k (macOS) or ctrl+k (Linux/Windows) to open the command menu

Topics

#react#command-palette#keyboard-shortcuts#typescript#ui-component#accessibility#hooks#javascript#shortcuts

FAQ

What is kbar?
A React command-palette (Cmd+K) component for adding a searchable action menu with keyboard shortcuts to a website. kbar is a React component library for adding a command palette, the Cmd+K style menu, to a website or web app. Users press a shortcut to open a search box and run any action that would otherwise require clicking through the interface.
Is kbar free to use? What license does it have?
kbar is open source under the MIT license. Check the license terms before using it in commercial products.
Is kbar still maintained?
Updated within 6 months. The last commit to kbar was on Aug 10, 2026.
What can I use kbar for?
Adding a Cmd+K search and navigation menu to a React documentation or content site. Letting users trigger app actions from the keyboard in a SaaS dashboard. Building a quick-jump menu for pages and settings in a web app.
How do I install kbar?
Install kbar from npm: npm install kbar Wrap your app with KBarProvider and add the UI components Press cmd+k (macOS) or ctrl+k (Linux/Windows) to open the command menu
Where can I get kbar?
The source code and installation instructions are on GitHub: https://github.com/timc1/kbar

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects