kbar

kbar is a simple plug-n-play React component to add a fast, portable, and extensible command + k (command palette) interface to your site.

!demo

Background

Command + k interfaces are used to create a web experience where any type of action users would be able to do via clicking can be done through a command menu.

With macOS's Spotlight and Linear's command + k experience in mind, kbar aims to be a simple
abstraction to add a fast and extensible command + k menu to your site.

Features

- Built in animations and fully customizable components
- Keyboard navigation support; e.g. control + n or control + p for the navigation wizards
- Keyboard shortcuts support for registering keystrokes to specific actions; e.g. hit t
for Twitter, hit ? to immediate bring up documentation search
- Nested actions enable creation of rich navigation experiences; e.g. hit backspace to navigate to
the previous action
- Performance as a first class priority; tens of thousands of actions? No problem.
- History management; easily add undo and redo to each action
- Built in screen reader support
- A simple data structure which enables anyone to easily build their own custom components

$3

Have a fully functioning command menu for your site in minutes. First, install kbar.

``
npm install kbar
`

There is a single provider which you will wrap your app around; you do not have to wrap your
_entire_ app; however, there are no performance implications by doing so.

`tsx
// app.tsx
import { KBarProvider } from "kbar";

function MyApp() {
return (

// ...

);
}
`

Let's add a few default actions. Actions are the core of kbar – an action define what to execute
when a user selects it.

`tsx
const actions = [
{
id: "blog",
name: "Blog",
shortcut: ["b"],
keywords: "writing words",
perform: () => (window.location.pathname = "blog"),
},
{
id: "contact",
name: "Contact",
shortcut: ["c"],
keywords: "email",
perform: () => (window.location.pathname = "contact"),
},
]

return (

// ...

);
}
`

Next, we will pull in the provided UI components from kbar:

`tsx
// app.tsx
import {
KBarProvider,
KBarPortal,
KBarPositioner,
KBarAnimator,
KBarSearch,
useMatches,
NO_GROUP
} from "kbar";

// ...
return (

// Renders the content outside the root node
// Centers the content
// Handles the show/hide and height animations
// Search input




;
);
}
`

At this point hitting cmd+k (macOS) or ctrl+k (Linux/Windows) will animate in a search input and nothing more.

kbar provides a few utilities to render a performant list of search results.

- useMatches at its core returns a flattened list of results and group name based on the current
search query; i.e. ["Section name", Action, Action, "Another section name", Action, Action]
- KBarResults renders a performant virtualized list of these results

Combine the two utilities to create a powerful search interface:

`tsx
import {
// ...
KBarResults,
useMatches,
NO_GROUP,
} from "kbar";

// ...
//
//
;
// ...

function RenderResults() {
const { results } = useMatches();

return (
items={results}
onRender={({ item, active }) =>
typeof item === "string" ? (