CSS Customization

CSS Customization

All command palette animations, dimensions, and visual properties are customizable via CSS custom properties.

Custom Properties

Override these on [data-command-root] or :root:

[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

All library styles are wrapped in @layer command, making it easy to override:

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

CSS Logical Properties

All properties use logical equivalents for full RTL/LTR support:

Physical	Logical
left / right	inset-inline-start / inset-inline-end
top / bottom	inset-block-start / inset-block-end
width	inline-size
height	block-size
margin-left	margin-inline-start
padding-top	padding-block-start

Disabling Animations

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

Or rely on prefers-reduced-motion — all animations are automatically disabled.