Skip to main content
Version: Stable (v5.x)

Style DocSearch

@docsearch/css contains the styles for the search button, modal, Agent Studio responses, and Sidepanel.

v5 beta

These instructions use the ^5 range.

Install and import​

npm install @docsearch/css@^5

For the search button and modal, import the package root:

app.js
import '@docsearch/css';

The root stylesheet includes variables, button styles, modal styles, and Agent Studio response styles. It doesn't include Sidepanel layout styles.

For a Sidepanel, add its stylesheet after the root stylesheet:

app.js
import '@docsearch/css';
import '@docsearch/css/dist/sidepanel.css';

Override variables​

Load your overrides after DocSearch CSS.

custom.css
:root {
  --docsearch-primary-color: #2457d6;
  --docsearch-primary-dark-color: #173b99;
  --docsearch-focus-color: #0b57d0;
  --docsearch-modal-width: 48rem;
  --docsearch-modal-radius: 0.75rem;
  --docsearch-hit-height: 3.75rem;
  --docsearch-border-radius: 0.375rem;
}

Prefer variables over selector overrides. Variables preserve focus, responsive, and state styles across package updates.

Frequently used variables include:

  • Brand and state: --docsearch-primary-color, --docsearch-primary-dark-color, --docsearch-highlight-color, --docsearch-focus-color, --docsearch-error-color, --docsearch-success-color
  • Text and surfaces: --docsearch-text-color, --docsearch-secondary-text-color, --docsearch-background-color, --docsearch-modal-background, --docsearch-subtle-color, --docsearch-muted-color
  • Modal: --docsearch-modal-width, --docsearch-modal-height, --docsearch-modal-variable-height, --docsearch-modal-radius, --docsearch-modal-shadow
  • Search box and hits: --docsearch-searchbox-height, --docsearch-searchbox-background, --docsearch-hit-height, --docsearch-hit-background, --docsearch-hit-focus-background
  • Button: --docsearch-search-button-background, --docsearch-search-button-text-color
  • Sidepanel: --docsearch-sidepanel-background, --docsearch-sidepanel-primary, --docsearch-sidepanel-border, --docsearch-sidepanel-text-base, --docsearch-sidepanel-text-muted

Set dark theme values​

DocSearch applies dark variables under html[data-theme='dark']. The theme="dark" prop on a DocSearch component sets this attribute.

Override dark values with the same selector:

custom.css
html[data-theme='dark'] {
  --docsearch-modal-background: #111827;
  --docsearch-background-color: #1f2937;
  --docsearch-text-color: #f3f4f6;
  --docsearch-secondary-text-color: #d1d5db;
  --docsearch-hit-background: #111827;
  --docsearch-hit-focus-background: #263244;
}

Add targeted overrides​

All component classes use the DocSearch- prefix. Scope selector overrides to a component and preserve visible focus states.

custom.css
.DocSearch-Button {
  min-width: 15rem;
}

.DocSearch-Sidepanel-Container.floating {
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 20%);
}

.DocSearch-Action:focus-visible,
.DocSearch-Button:focus-visible {
  outline: 2px solid var(--docsearch-focus-color);
  outline-offset: 2px;
}

Don't remove the visually hidden helpers or reduced-motion rules. They support accessible labels, keyboard use, and user motion preferences.

See the CSS bundle and export guide when you need component-specific assets.