screens/DSCommandPalette

DSCommandPalette

screens

since 0.1.0

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

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

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

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

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

Prop	Type	Default	Description
isPresentedreq	Binding<Bool>	—	Controls visibility. Set to false to dismiss.
itemsreq	[DSCommandItem]	—	Commands to search. Grouped in the list by each item's category.
placeholder	String	"Search commands..."	Search field placeholder.

Examples

Present over the app

Place it in an overlay and toggle it from a ⌘K shortcut.

swift

ContentView()
    .overlay {
        if showPalette {
            DSCommandPalette(isPresented: $showPalette, items: [
                DSCommandItem(title: "Go to Dashboard", icon: "house", category: "Navigation", shortcut: "⌘D") {
                    navigate(.dashboard)
                },
                DSCommandItem(title: "Open Settings", icon: "gearshape", category: "Navigation", shortcut: "⌘,") {
                    navigate(.settings)
                },
                DSCommandItem(title: "New Project", subtitle: "Create an empty project", icon: "plus", category: "Actions", shortcut: "⌘N") {
                    createProject()
                },
            ])
        }
    }

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

SearchBar Modal