Command

A command palette / cmd+k style searchable list, powered by cmdk inside a sketch-bordered panel.

Roughness1.5Lock seedAnimate

<Command roughness={1.5}>
  <CommandInput placeholder="Search tools…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup>
      <CommandItem value="Pen">Pen</CommandItem>
      <CommandItem value="Pencil">Pencil</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

CLI install

npx doodleui-react add command

Usage

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "doodleui-react";

<Command>
  <CommandInput placeholder="Search tools…" />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup>
      <CommandItem value="Pen">Pen</CommandItem>
      <CommandItem value="Pencil">Pencil</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

CommandSeparator (a drawn line) and CommandShortcut (a muted trailing caption) round out the set. See Combobox for a ready-made searchable select built on top of Command + Popover.

Props

Prop	Type	Default	Notes
shouldFilter / filter	boolean / (value, search, keywords?) => number	true / cmdk default	cmdk's built-in fuzzy filtering, or bring your own.
value / onValueChange	string / (value: string) => void	uncontrolled	Controls the highlighted item value.
animate	boolean	true	Draw-in the panel border on mount. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.