dip/cmdk

cmdk is a React component for building command menu interfaces, sometimes called command palettes. A command menu is the search-everything popup that opens when you press Cmd+K (or Ctrl+K on Windows) in many modern web apps like Notion, Linear, or Vercel. The user types a few characters, a filtered list of actions or items appears, and selecting one triggers something. This library provides the behavior and structure for that pattern without any built-in visual styling. The component automatically filters and ranks the list of items as the user types. Items can be grouped under headings, and groups that have no matching items are hidden automatically. An empty state component renders when nothing matches. A loading state component can be shown while fetching results asynchronously. Each part of the component exposes a data attribute starting with "cmdk-" so developers can target it with CSS and apply whatever visual design they want. The component can be embedded inline on a page or rendered inside a dialog that floats over the rest of the content. The dialog variant builds on Radix UI's Dialog primitive and handles opening, closing, and the overlay backdrop. A keyboard shortcut example in the README shows how to wire up Cmd+K to toggle the dialog open and closed. Developers can pass a custom filter function to control how items are ranked against the search input, or disable filtering entirely to manage the list themselves. Items can also have extra keywords that are not displayed but help the filter match the item more broadly. The library is installed from npm as a single package and is built to stay small. It is written in TypeScript and its parts forward all standard HTML props and refs to the underlying DOM elements, making it straightforward to integrate into an existing React codebase.