cmdk: Fast, Unstyled Command Menu Component for React

LinkTool

cmdk (⌘K) is an unstyled React component designed for command palettes and accessible comboboxes. It automatically sorts and filters items while providing a fully composable API. It enables developers to build custom-styled search and navigation menus with minimal setup.

Key points

  1. Can be rendered inline or inside an overlay modal via Command.Dialog, built on Radix UI.
  2. Filters and sorts items out of the box, with support for custom rank functions and alias keywords.
  3. Completely unstyled, exposing custom cmdk data-attributes on elements for straightforward CSS targeting.
  4. Includes a useCommandState hook that composes useSyncExternalStore for granular state subscriptions.
  5. Supports nested pages, asynchronous loading indicators, and integration inside Radix UI popovers.

Why it matters

Command palettes are essential for desktop-class web applications. cmdk provides the complex accessibility and keyboard-navigation foundation without forcing design constraints on the project.

Analysis

Architecture and Composition

cmdk exposes a composable sub-component API consisting of Command.Input, Command.List, Command.Item, Command.Group, Command.Empty, and related elements. It automatically ranks and displays items based on text content or an explicit value. Developers can customise sorting by passing a ranking callback with filter, registering search aliases via keywords, or bypassing automatic evaluation altogether with shouldFilter={false}.

Customisation and Behaviour

The component ships without styles, delegating visuals entirely to the host application. HTML outputs include targeted data attributes such as cmdk-root, cmdk-item, and selection state flags (data-selected). The list height can be animated cleanly through the exposed CSS variable --cmdk-list-height.

Modals and Advanced UX

For elevated palette overlays, Command.Dialog incorporates Radix UI Dialog primitives, enabling keyboard hotkeys (such as ⌘K/Ctrl+K) and configurable portal containers. Advanced flows like multi-step nested navigation pages, deferred sub-items, and asynchronous data fetching are demonstrated as standard composition patterns.

Found in

Summary generated by AI (Gemini 3.8 Flash, 8 November 2026). It may contain errors – the original source is authoritative.

Similar in content, found by the AI search.

  • Link:base-ui.com

    Base UI: Unstyled, Accessible UI Components for React

    Base UI is an open-source, unstyled React component library designed for accessible design systems. Built by creators from Radix, Floating UI, and Material UI, it provides styling-agnostic, customizable primitives adhering to WCAG 2.2. It aims to give development teams a robust foundation for distinctive web interfaces.

    Web development· Tool

  • Link:WorkOS

    Radix UI: Accessible Open Source Component Library for React

    Radix UI by WorkOS is an open-source component library built for rapid development, straightforward maintenance, and built-in accessibility. Developers can start building interfaces immediately with ready-to-use packages such as Radix Themes without configuration.

    Web development· Tool

  • Link:@Alok619308

    Cue Kit: Open-Source React Components with Accompanying AI Prompts

    Cue Kit provides over 50 free, MIT-licensed React UI components. Many designs include the original AI prompt alongside the component code, allowing direct use in AI workflows. Developers can import components directly via the shadcn CLI.

    Web development· Tool

  • Link:base-ui.com

    Base UI: Autocomplete Component for React

    Documentation for the @base-ui/react Autocomplete component. It provides search and suggestion capabilities during text input, supports asynchronous loading, and explicitly distinguishes itself from combobox controls.

    Web development· Resource

  • Repository:shadcn-labs/pdfcn

    pdfcn: shadcn-Style React Components for PDF Generation

    pdfcn is an open-source component library for generating PDFs in React. Built on Takumi and Forme, it adopts the copy-paste philosophy and CLI registry workflow of shadcn/ui.

    1kstarsTypeScript

    Web development· Tool

Let's talk about your project

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.