Skip to content
Cuelark UI
NavigationAnimated

Command

⌘K command palette with fuzzy search and a gliding highlight.

A command palette lets people jump anywhere and run any action from the keyboard. Cuelark's palette (built on cmdk) filters fuzzily, groups results under mono headings, shows shortcuts as keycaps, and its highlight glides between results as you arrow through.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/command.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/command.

Builds on: dialog, motion

Usage

import { CommandDialog, CommandInput, CommandItem, CommandList } from "@/components/ui/command";

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search…" />
  <CommandList>
    <CommandItem>Profile</CommandItem>
  </CommandList>
</CommandDialog>

Motion

How it moves

One highlight glides to the selected item with GSAP as you arrow through results.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Command

cmdk root (value, onValueChange, filter, shouldFilter, loop).

CommandDialog

PropTypeDefaultDescription
title · descriptionstring—Screen-reader title and description.

CommandInput · CommandList · CommandEmpty · CommandGroup · CommandItem · CommandShortcut · CommandSeparator

Accessibility

  • The input controls a listbox; arrows move the active option.
  • The dialog version has a screen-reader title.

FAQ

Also searched as: command palette react · cmdk · cmd k menu · shadcn command · spotlight search component