How to implement command palette with Kbar and Tailwind CSS

Install command palette on your website

Cmd+K

What is a command palette

A command palette is a user interface (UI) element that gives users quick access to many commands. It’s usually a free-form input field that helps users find an action by narrowing down a list, based on what they type.
— Superhuman Blog

It has become commonplace to see Command Palette on Notion, Figma, Slack, Discord, framework documentation sites, and personal portfolio sites etc.

The Cmd+K shortcut opens a search form panel that allows you to quickly access the page or action you are looking for. It also provides shortcuts to those actions.

Command Palettes — TailwindUI

More and more people are implementing Command Palette into their own portfolios. the best engineers I watch are using Command Palette in their portfolios. Their portfolios are available on Github with source code for reference.

• Maximeheckel
• Zenorocha

I have implemented this CommandPalette in my portfolio. My portfolio also provides a Command Palette with Cmd + K and Toggle button. I had the following options to implement.

• Kbar
• TailwindUI

Difference between kbar & command palette in Tailwind UI

kbar has it “fully extensible” with a more exposed API rather than building it yourself with Tailwind UI’s command palette.

Simple and straightforward?
Go with the video “Building a command palette with Tailwind CSS, React, and Headless UI” from Tailwind Labs by Simon Vrachliotis

Need more control and has complex requirements?
Go with kbar by @timc1 using Tailwind CSS. Especially if you need shortcuts, undo/redo, priority, history, etc.

I chose Kbar because its future expansion and the variety of existing resources and sample code.

Kbar on my portfolio

Getting started

If you follow the tutorial, you can install CommandPalette without any problems.

https://kbar.vercel.app/docs/getting-started

Open `kbar` by button

You can open Kbar using Toggle button.

const { query } = useKBar();
<button onClick={query.toggle}>Toggle</button>

But, The following error was output

Unhandled Runtime Error
TypeError: undefined is not an object (evaluating ‘query.toggle’)

※ The component that calls useKBar must be rendered in KBarProvider

I code this way because it only works within KBarProvider.

return (
<ThemeProvider>
<KBarProvider actions={actions}>
<CommandBar />
<Component {...pageProps} />
</KBarProvider>
</ThemeProvider>
);

Place Icons

Import the icon set you want to add

import {
HomeIcon,
CollectionIcon,
UserCircleIcon,
FolderIcon,
NewspaperIcon
} from '@heroicons/react/solid';

Add the icon component you want to add to the action

const actions = [
{
id: 'home',
name: 'Home',
shortcut: ['h'],
keywords: 'home index',
section: 'Go to',
perform: () => (window.location.pathname = '/'),
icon: <HomeIcon className="w-6 h-6" />
},
];

Demo

For anyone who wants to customize with TailwindCSS, the code is open to the public. demo

kbar-tailwind demo

Actions to add in the future

• Access to recently updated pages
• Access to previously viewed pages and actions
• Copy and paste URLs
• Changing the theme

Thank you for reading!

If you enjoyed this article, follow me on Twitter, LinkedIn,or Figma.