screens/DSCommandPalette

DSCommandPalette

screens
since v2.0

Command palette activated by ⌘K. Real-time filtering, section grouping, keyboard shortcuts, and arrow-key navigation.

iOS 17+macOS 14+

Purpose

Power-user feature for quick access to any action, route, or data without using the mouse. Increases productivity in SaaS apps.

States

closed

Hidden. Activated by ⌘K or a button.

open

Overlay with blur, search field, and action list.

searching

List filtered in real time as the user types.

empty

No-results state with a contextual message.

Props

PropTypeDefaultDescription
isPresentedreqBinding<Bool>—Controls visibility.
sectionsreq[(title: String, items: [DSCommandItem])]—Sections containing command items.
placeholderString"Type a command..."Search placeholder text.

Examples

Keyboard integration (macOS)

Activate with ⌘K and dismiss with Esc.

swift
DSCommandPalette(
    isPresented: $showPalette,
    sections: [
        (
            title: "Navigation",
            items: [
                DSCommandItem(
                    id: "home",
                    label: "Go to Dashboard",
                    icon: "house",
                    shortcut: "⌘D",
                    action: { navigate(.dashboard) }
                ),
                DSCommandItem(
                    id: "settings",
                    label: "Open Settings",
                    icon: "gearshape",
                    shortcut: "⌘,",
                    action: { navigate(.settings) }
                ),
            ]
        ),
        (
            title: "Actions",
            items: [
                DSCommandItem(
                    id: "new",
                    label: "New Project",
                    icon: "plus",
                    shortcut: "⌘N",
                    action: { createProject() }
                ),
            ]
        ),
    ]
)
.keyboardShortcut("k", modifiers: .command)

Usage Guidelines

  • Register all existing shortcuts to avoid conflicts with the system.
  • Show recent actions at the top of the list when the field is empty.
  • Order sections by frequency of use.

Related Components

SearchBarModal