Let's add a Command Palette on our website

Add a raycast style command palette to your website

Before you start, let’s see what we are going to build.

Try it out – press cmd+k (macOS) or ctrl+k (Linux/Windows), or click the header above.

Awesome! Now let’s start.

All the code used in this blog is available on this CodeSandbox Link. CSB LINK

We will be using a library called KBar

Adding Provider and actions

In your root file, wrap the App with a KbarProvider and pass it the default actions prop

1// index.js
2
3import { KBarProvider } from 'kbar';
4
5const actions = [
6  {
7    id: 'youtube',
8    name: 'Youtube',
9    shortcut: ['g', 'y'],
10    perform: () =>
11      (window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'),
12  },
13  {
14    id: 'twitter',
15    name: 'Twitter',
16    shortcut: ['g', 't'],
17    keywords: 'twitter',
18    perform: () =>
19      (window.location.href = 'https://twitter.com/verma__shubham'),
20  },
21];
22
23return (
24  <KBarProvider actions={actions}>
25    <App />
26  </KBarProvider>
27);

Now if you press the shortcut, you will see that nothing happens. This is because we haven’t added the other utilities that Kbar provides.

Adding KBar utilities

Let’s add the below code.

1// index.js
2
3import {
4  KBarAnimator,
5  KBarPortal,
6  KBarPositioner,
7  KBarProvider,
8  KBarResults,
9  KBarSearch,
10} from 'kbar';
11
12
13const actions = [
14//...
15]
16
17return (
18  <KBarProvider actions={actions}>
19    <KBarPortal>
20      <KBarPositioner>
21        <KBarAnimator>
22          <KBarSearch />
23        </KBarAnimator>
24      </KBarPositioner>
25    </KBarPortal>
26    <App />
27  </KBarProvider>
28);

Now we are able to see a search box when you press the shortcut! But you’ll notice nothing happens when we search.

Why are our default actions not rendered?

Adding the KBarResults

Create a component called Results.
The useMatches() hooks returns us the results of the searched query.
We will use the KBarResults component to render the results.

1const Results = () => {
2  const { results } = useMatches();
3  return (
4    <KBarResults
5      items={results}
6      onRender={({ item, active }) => {
7        return typeof item === 'string' ? (
8          // For sections.
9          <div> {item}</div>
10        ) : (
11          // For the items.
12          <p
13            style={{
14              backgroundColor: active ? 'gray' : 'white',
15              height: '50px',
16            }}>
17            {item.name}
18          </p>
19        );
20      }}
21    />
22  );
23};
24
25// USE THE ABOVE COMPONENT right after the KBarSearch />
26
27// ...
28<KBarProvider>
29  <KBarPortal>
30    <KBarPositioner>
31      <KBarAnimator>
32        <KBarSearch />
33        {/* USE THE Results COMPONENT here*/}
34        <Results />
35      </KBarAnimator>
36    </KBarPositioner>
37  </KBarPortal>
38  <App />
39</KBarProvider>;
40// ...

Adding nested Results

If you open up Kbar on this website, you will see a “Search Blogs” item which opens up nested results. Let’s see how its done.

All we need to do it add a action and reference the other actions with a parent key.

1// Change the actions variable to this
2
3const actions = [
4  {
5    id: 'youtube',
6    name: 'Youtube',
7    shortcut: ['g', 'y'],
8    perform: () =>
9      (window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'),
10  },
11  {
12    id: 'twitter',
13    name: 'Twitter',
14    shortcut: ['g', 't'],
15    keywords: 'twitter',
16    perform: () =>
17      (window.location.href = 'https://twitter.com/verma__shubham'),
18  },
19  {
20    id: 'search-blogs',
21    name: 'Search Blogs',
22    shortcut: ['s', 'b'],
23  },
24  {
25    id: 'blog-1',
26    name: 'Blog 1',
27    parent: 'search-blogs',
28  },
29  {
30    id: 'blog-2',
31    name: 'Blog 2',
32    parent: 'search-blogs',
33  },
34];

Toggling KBar using the useKar hook

In our App.js file, we will use the useKBar() hook to toggle KBar.

1
2import { useKBar } from 'kbar';
3import './styles.css';
4
5export default function App() {
6  const kbar = useKBar();
7
8  return (
9    <div className="App">
10      <h1>Hit Ctrl + K or Cmd + K</h1>
11      <button
12        onClick={() => {
13          kbar.query.toggle();
14        }}>
15        Toggle Kbar
16      </button>
17    </div>
18  );
19}

That's it! Now you can toggle KBar by pressing Cmd + K on macOS

or Ctrl+K on Windows/Linux. And also by clicking the button.