CSS Customization

Custom Properties

[data-command-root] {
 /* Spring easing (linear() approximation) */
 --command-spring-easing: linear(0, 0.006, 0.025, 0.058, ...);
 --command-spring-easing-bouncy: linear(0, 0.009, 0.035, ...);
 --command-easing-exit: cubic-bezier(0.4, 0, 1, 1);
 /* Durations */
 --command-duration-enter: 200ms;
 --command-duration-enter-scale: 250ms;
 --command-duration-exit: 150ms;
 --command-duration-item: 120ms;
 --command-duration-list: 200ms;
 --command-duration-page: 200ms;
 --command-duration-loading: 1.5s;
 /* Transforms */
 --command-scale-from: 0.96;
 --command-translate-from: 8px;
 /* Appearance */
 --command-overlay-blur: 4px;
 --command-dialog-radius: 12px;
 --command-dialog-max-width: 640px;
 --command-dialog-max-height: 480px;
 --command-item-height: 44px;
 --command-fade-edge-size: 16px;
 --command-highlight-color: oklch(0.85 0.15 90 / 0.3);
}

@layer

/* Your overrides automatically win over library defaults */
[data-command-item][data-active] {
 background: var(--my-highlight);
}

CSS Logical Properties

Disabling Animations

[data-command-root] {
 --command-duration-enter: 0ms;
 --command-duration-exit: 0ms;
 --command-duration-item: 0ms;
 --command-duration-list: 0ms;
}