screens/DSCommandPalette
DSCommandPalette
screensCommand 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.
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. |
| sectionsreq | [(title: String, items: [DSCommandItem])] | — | Sections containing command items. |
| placeholder | String | "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.