Cmdk

cmdk is an unstyled, headless React component library for building accessible search-based navigation and command interfaces. It provides the logic and state management required to create keyboard-navigable command palettes that filter lists of actions and items based on user input.

The library distinguishes itself by remaining visually agnostic, offering a collection of logic-heavy components without predefined styles. It supports advanced organization through hierarchical menu navigation, nested paging systems, and conditional group filtering that hides categories when no child items match a search query.

The framework covers a broad range of functional areas, including asynchronous data handling for external search sources and customizable ranking logic to determine result priority. It also manages the UI state for overlay displays and renders specific status states for loading or empty result sets.

The components are designed to follow keyboard and screen reader standards for accessible menu rendering.

Features

Command Palette Frameworks - Provides the logic and state management for building accessible, searchable command palettes in React.

Command Palettes - Provides a headless React framework for building accessible, searchable command palettes that filter and sort actions.

Accessible Menu Rendering - Renders searchable lists that maintain standard keyboard and screen reader navigation for accessibility.

Accessible UI Components - Builds searchable lists and dialogs that adhere to ARIA and keyboard standards for users with disabilities.

Search-Based Navigation Interfaces - Implements a UI pattern for triggering actions and navigating applications via a text-based search input.

React Components - Offers reusable, headless interface elements specifically designed for the React ecosystem.

Focus Management - Manages active item indices via keyboard events to enable navigation without relying on native HTML focus.

Keyboard Navigation - Enables fast application navigation and function triggering through a keyboard-driven search interface.

Headless UI Libraries - Provides a collection of logic-heavy, unstyled components that manage state and accessibility without prescribing visuals.

Dynamic Menu Hierarchies - Implements nested pages and sub-items that appear dynamically based on user selection or active search queries.

UI List Filtering - Hides or shows items in the command menu in real-time based on the user's search input.

Conditional Group Visibility - Automatically hides category headings when no matching child items are found during search.

Search Ranking Algorithms - Provides customizable scoring and priority functions to determine the order of search results.

Client-Side Data Filtering - Implements logic for processing and filtering local item collections based on user search input.

Context State Propagators - Utilizes a provider pattern to distribute search and selection state across nested components without prop drilling.

Asynchronous Search Interfaces - Implements a search interface that fetches and renders data from background API requests in real-time.

Compound Components - Uses a compound component architecture to provide a flexible and declarative API for building command menus.

Menu Hierarchies - Implements nested menu structures and paging systems to organize large sets of commands.

Hierarchical Menu Organization - Organizes commands into a structured hierarchy to improve the scannability of the command menu.

Nested Navigation Menus - Implements a paging system that replaces the current list with refined sub-items through nested navigation menus.

Search Result Ranking - Implements customizable ranking logic to determine the priority and order of search results based on user input.

Asynchronous Data Handling - Handles non-blocking data retrieval from external sources while maintaining active filtering and sorting.

dipcmdk

Features

Star history