maud-ui64 components

Command

Command palette trigger

Press ⌘K
Suggestions
Calendar
Search
Settings
Actions
New File⌘N
Save⌘S
Export

Composable slots: shortcut / separator / empty

File
New File⌘N
Save⌘S
Edit
Undo⌘Z

Empty state

No results found.

Usage

use maud_ui::primitives::command;

// Render the trigger button
let trigger = command::trigger("cmd-palette", "Command palette");

// Render the palette
let html = command::render(command::Props {
    id: "cmd-palette".into(),
    placeholder: "Type a command...".into(),
    items: vec![
        command::CommandItem { label: "New file".into(), shortcut: Some("Cmd+N".into()), group: Some("File".into()), disabled: false },
        command::CommandItem { label: "Search".into(), shortcut: Some("Cmd+K".into()), group: Some("General".into()), disabled: false },
    ],
});

Command

Command palette with search, grouped items, and keyboard navigation (Cmd+K pattern).

Import

use maud_ui::primitives::command::{self, Props, CommandItem};

Example

use maud::html;
use maud_ui::primitives::command;

let items = vec![
    command::CommandItem {
        label: "New File".to_string(),
        shortcut: Some("⌘N".to_string()),
        group: Some("Actions".to_string()),
        disabled: false,
    },
];

html! {
    (command::render(command::Props {
        id: "cmd".to_string(),
        items,
        placeholder: "Type a command...".to_string(),
    }))
}

Props

FieldTypeDefaultDescription
idString"command"Unique identifier for the dialog
itemsVec<CommandItem>vec![]List of command items
placeholderString"Type a command or search…"Placeholder text in search input

CommandItem Struct

FieldTypeDefaultDescription
labelString—Display text for the command
shortcutOption<String>NoneOptional keyboard shortcut (e.g., "⌘N")
groupOption<String>NoneOptional group name for categorization
disabledboolfalseWhether the item is disabled

Helper Functions

trigger(target_id, label) → Markup

Renders a button that opens the command palette dialog. Data attributes wire JS trigger behavior.

shortcut(children) → Markup

Renders a <kbd> element styled for keyboard shortcuts. Use when composing custom item markup.

separator() → Markup

Renders a visual divider between command groups.

empty(text) → Markup

Renders a no-results empty state. Use when a search yields no matches.

Accessibility

  • Dialog has aria-label="Command palette" and aria-modal="true"
  • Search input has aria-label="Search commands"
  • Items are role="option" with tabindex="-1" in a role="listbox" container
  • Disabled items get aria-disabled="true"

Related

  • Dialog
  • Menu
  • Combobox

Shadcn reference

https://ui.shadcn.com/docs/components/command

← Back to Gallery