components / 29

marked command

search should feel immediate, not invisible. every focused command carries a bright hand-drawn trace and every shortcut stays readable.

shadcnnpx shadcn@latest add berkantay/cheez/marked-command

live

find the next action

type or use arrow keys

⌘ k search without leaving

command menu

ink

character

value

<MarkedCommand
  items={actions}
  value={selected}
  onValueChange={setSelected}
  itemToStringLabel={(action) => action.label}
  tone="purple"
  character="rushed"
>
  <MarkedCommandInput />
  <MarkedCommandContent>
    <MarkedCommandEmpty>no command found.</MarkedCommandEmpty>
    <MarkedCommandList>
      {(action) => <MarkedCommandItem value={action}>{action.label}</MarkedCommandItem>}
    </MarkedCommandList>
  </MarkedCommandContent>
</MarkedCommand>

palette

open above the work

focus returns to the trigger on close

the command menu can stay inline or arrive as a focused palette.

the dialog owns focus and escape behavior. the command still owns search, highlighting, and selection.

structure

groups keep the scan quick

visible labels, searchable children

command menu

01create2 actions

02navigate2 actions

03appearance2 actions

states

silence is still a state

empty, loading, disabled

empty

command menu

disabled

command menu

reference

api

Base UI mechanics, Cheez feedback

part	prop	type	default	purpose
Root	`items`	`Action[] \| Group[]`	`—`	filterable command collection
Root	`value`	`Action \| null`	`—`	controlled chosen command
Root	`onValueChange`	`function`	`—`	run or store a command
Root	`label`	`ReactNode`	`"command menu"`	accessible search label
Root	`tone`	`MarkedCommandTone`	`"purple"`	field and result ink
Root	`character`	`CheezCharacter`	`"rushed"`	drawing pressure
Input	`placeholder`	`string`	`"type a command…"`	search prompt
Input	`clearLabel`	`string`	`"clear command search"`	clear-button name
Content	`loading`	`boolean`	`false`	announced search state
Item	`description`	`ReactNode`	`—`	secondary result copy
Item	`icon`	`ReactNode`	`—`	decorative leading symbol
Item	`shortcut`	`ReactNode`	`—`	visible keyboard hint
Separator	`color`	`string`	`"#ff4f2e"`	hand-cut group divider

behavior notes

the search field keeps a real combobox role and accessible label
Arrow Down and Arrow Up move focus, Enter chooses, and Escape closes
the selected result is surfaced through onValueChange, never hidden in context
groups and empty states stay part of the Base UI collection model
dialog focus trapping and restoration come from Base UI
the shortcut is a visual hint; application-level keyboard bindings remain yours
no Framer Motion is shipped