Albert-Sans VS cmdk

This is also the time to import in any fonts. For my project, I'm going to use Albert Sans, the brand new font on Google Fonts!

CMDK Console: A console for your React applications

The Combobox of shadcn/ui used in the above implementation is a wrapped version of cmdk’s Combobox. I wanted to change the logic of suggest, so I added my own implementation to the filter as described in cmdk’s documentation. It seems that sorting is also possible. For example,change https://github.com/armandsalle/my-site/blob/main/src/components/autocomplete.tsx#L88 to the following:

For a company of my size and varied requirements though, the ecosystem saves us months of work since there's always a library to help meet the requirements. A specific example recently would be the need for a command menu, with React we can just take one off the shelf like https://cmdk.paco.me/ that with 5.2k stars we can be confident is stable. Compared with Svelte's https://github.com/rohitpotato/svelte-command-palette with 140 stars there's just more risk when deploying to millions of users.

You can either build a command palette yourself from scratch by using Cmdk or Kbar, or go with the SaaS route (e.g Magny) in case you want something readily baked.

It was strongly inspired by my good friend Paco & Rauno's cmdk.paco.me project :)

cmdk - Fast, unstyled command menu React component.

With that, there are a few different approaches for adding a command menu to your website: you can use an open source library (like kmenu, cmdk, or kbar), use a proprietary tool such as CommandBar, or build your own. This tutorial focuses on building your own implementation, however you may not need to depending on whether or not you're satisfied with the other options available.