Command

A command palette with fuzzy search, keyboard navigation, and grouped items.

Basic

Command palette with suggestion and settings groups.

Dialog

Command palette rendered inside a dialog overlay. Click the button to open.

Usage

julia

using Suite

Command(
    CommandInput(placeholder="Type a command or search..."),
    CommandList(
        CommandEmpty("No results found."),
        CommandGroup(heading="Suggestions",
            CommandItem(value="calendar", "Calendar"),
            CommandItem(value="search", "Search"),
        ),
        CommandSeparator(),
        CommandGroup(heading="Settings",
            CommandItem(value="profile", "Profile",
                CommandShortcut("⌘P")),
            CommandItem(value="settings", "Settings",
                CommandShortcut("⌘,")),
        ),
    ),
)

Keyboard Interactions

Key	Action
`Arrow Down`	Move focus to the next item
`Arrow Up`	Move focus to the previous item
`Enter`	Select the focused item
`Escape`	Close the dialog
`Ctrl+N / Ctrl+J`	Move focus to the next item (vim binding)
`Ctrl+P / Ctrl+K`	Move focus to the previous item (vim binding)

API Reference

Command

Prop	Type	Default	Description
children...	Any	-	Command sub-components (container)

CommandInput

Prop	Type	Default	Description
placeholder	String	"Search..."	Placeholder text for the search input

CommandList

Prop	Type	Default	Description
class	String	""	Additional CSS classes

CommandEmpty

Prop	Type	Default	Description
children...	Any	-	Content shown when no results match

CommandGroup

Prop	Type	Default	Description
heading	String	""	Group heading label

CommandItem

Prop	Type	Default	Description
value	String	""	Unique value identifier for the item
disabled	Bool	false	Disable this item

CommandSeparator

Prop	Type	Default	Description
-	-	-	Visual separator between groups

CommandShortcut

Prop	Type	Default	Description
children...	Any	-	Keyboard shortcut text

CommandDialog

Prop	Type	Default	Description
children...	Any	-	Wraps Command in a dialog overlay