Command
Command palette with Paper Cut styling. Follow the elevation budget: outer containers own elevation, inner content stays flat.
Basic Usage
The default command uses default (Level 3) elevation with lift disabled by default to keep dense UIs stable.
Variants
Three elevation levels for different contexts. Choose based on the component's role in the interface hierarchy.
Elevated (Level 4)
Strong shadow for spotlight search moments (still no lift).
Default (Level 3)
Subtle shadow for general-purpose command panels.
Outlined (Level 2)
Border only, no shadow. Use when nesting inside a container that already owns elevation.
Embedded (Dialog)
No border, no shadow. For use inside DialogContent or other surfaces that provide their own styling.
Command Dialog
A modal command palette, typically triggered with CtrlK keyboard shortcut.
Scrollable List
When the list content exceeds the maximum height, it becomes scrollable.
Best Practices
Real-world scenarios demonstrating proper elevation budget allocation. The key principle: one region should have only one "hero" — the outer container owns the elevation while inner content remains flat.
Dialog Context
When used inside a Dialog, use embedded variant. The Dialog provides its own border and shadow.
Sidebar Search
For search inside a sidebar panel, use outlined (border-only) and keep the layout compact.
Standalone Search
For a standalone search component, use default variant with its own elevation.
Anti-patterns
Common mistakes to avoid. The primary concern is elevation budget — stacking multiple elevated containers creates visual noise.
Card has shadow + Command has shadow = visual noise
Card has shadow, Command is outlined = clean hierarchy