Command

Searchable command palette with grouped items. Can be used inline or inside a dialog overlay.

Example

Props

Command.Root

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Command content

Command.Dialog

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls dialog visibility (bindable)
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Dialog content

Command.Input

Prop	Type	Default	Description
`placeholder`	`string`	`'Search...'`	Input placeholder text
`value`	`string`	`''`	Search value (bindable)
`class`	`string`	—	Additional CSS classes

Command.List

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Items and groups

Command.Item

Prop	Type	Default	Description
`value`	`string`	—	Search/match value
`onSelect`	`() => void`	—	Callback when item is selected
`disabled`	`boolean`	—	Disables the item
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Item content

Command.Empty

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Message when no results match

Command.Group / Command.GroupHeading / Command.Separator

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Content (Separator has no children)

Usage

<script>
  import { Command, Button } from '@chrissnell/chonky-ui';

  let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Open Command Palette</Button>
<Command.Dialog bind:open>
  <Command.Input placeholder="Type a command..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group>
      <Command.GroupHeading>Files</Command.GroupHeading>
      <Command.Item value="new-file" onSelect={() => (open = false)}>
        New File
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>