Advanced Styling

Where styling lives as of SDK v3.2+. Colors, borders, alignment, and width are driven by CSS custom properties — not by HTML attributes. These variables can be set two ways:

From the Settings API (preferred) — theming is configured per-tenant in the Bonsai dashboard and injected into the component’s shadow DOM automatically at load time.
From your page’s CSS — set any variable on the <bonsai-searchbar> element itself to customize per-embed. Page CSS wins over the Settings API because Settings-API variables are injected at :host low specificity.

Two restrictions. Set variables on the element, never on :root or a wrapper — the SDK declares its defaults on :host, and an inherited value loses to a direct one. And under theme="dark" the colour variables are fixed by the theme and cannot be overridden at all; see Dark theme below.

Legacy HTML attributes like brand-color, text-color, input-bg, card-bg, results-columns, input-opacity, etc. are no longer supported — use the variables below instead.

CSS Variables

Set any of these on the <bonsai-searchbar> element itself to override the defaults or Settings-API values.

<style>
  bonsai-searchbar {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
    --bonsai-muted-color: #9CA3AF;
    --bonsai-input-bg: #f5f5f5;
    --bonsai-input-text-color: #303030;
    --bonsai-suggestions-text-color: #303030;
    --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);
    --bonsai-surface-color: #ffffff;
    --bonsai-canvas-color: #fafafa;
    --bonsai-searchbar-align: center;
    --bonsai-searchbar-max-width: 42rem;
    --bonsai-searchbar-margin: 24px 0;
  }
</style>

Reference Table

Variable	Default	Purpose
`--bonsai-brand-color`	`#0A5B3B`	Accent color for focus, buttons, and highlights
`--bonsai-text-color`	`#303030`	Primary text
`--bonsai-suggestions-text-color`	`#303030`	Suggestions text
`--bonsai-input-text-color`	`#303030`	Input text + icon
`--bonsai-suggestions-hover-bg`	`rgba(0, 0, 0, 0.04)`	Suggestions hover background
`--bonsai-muted-color`	`#9CA3AF`	Secondary text
`--bonsai-input-bg`	`#f5f5f5`	Input + dropdown background
`--bonsai-surface-color`	`#ffffff`	Surface background
`--bonsai-canvas-color`	`#fafafa`	Canvas background Declared but not consumed by the SDK — setting it currently has no effect.
`--bonsai-border-color`	`rgba(0, 0, 0, 0.06)`	Default border
`--bonsai-border-color-hover`	`rgba(0, 0, 0, 0.12)`	Hover border
`--bonsai-hover-bg`	`rgba(0, 0, 0, 0.04)`	Hover background
`--bonsai-error-bg`	`rgba(220, 53, 69, 0.1)`	Error background
`--bonsai-error-color`	`#c82333`	Error text
`--bonsai-searchbar-align`	`center`	Horizontal alignment of the inner container (`flex-start`, `center`, `flex-end`)
`--bonsai-searchbar-max-width`	`42rem`	Maximum width of the input
`--bonsai-searchbar-margin`	`24px 0`	Vertical margin around the search bar Declared but not consumed by the SDK — setting it currently has no effect.

Dark theme

theme="dark" declares its palette on an element inside the search bar’s shadow root, so page CSS, inline style="", !important and Settings-API colours are all outranked. The colour variables cannot be changed while it is set.

To build a dark search bar you control, set theme="light" and supply the palette yourself. The block below is the built-in dark palette, copied out so you can edit it — the bar looks the same as theme="dark", except these lines now work.

<style>
  bonsai-searchbar {
    --bonsai-text-color: #e5e7eb;
    --bonsai-suggestions-text-color: #303030;
    --bonsai-input-text-color: #303030;
    --bonsai-muted-color: #a1a1aa;
    --bonsai-input-bg: #ffffff;
    --bonsai-surface-color: #181a20;
    --bonsai-canvas-color: #0f1115;
    --bonsai-border-color: rgba(255, 255, 255, 0.08);
    --bonsai-border-color-hover: rgba(255, 255, 255, 0.14);
    --bonsai-hover-bg: rgba(255, 255, 255, 0.06);
    --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.04);
    --bonsai-error-bg: rgba(248, 113, 113, 0.15);
    --bonsai-error-color: #fca5a5;
    --bonsai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --bonsai-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --bonsai-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.55);
  }
</style>

<bonsai-searchbar api-key="API-KEY" theme="light"></bonsai-searchbar>

Copy the whole block. Any variable you leave out falls back to a light default — an invisible rgba(0, 0, 0, 0.06) border on a dark page, for example. The full explanation, and the complete list of variables the theme takes over, is in Dark theme; the mechanism is identical for both components.

Search Bar Parts

The search bar exposes the same part names as <bonsai-search>. There are no searchbar--prefixed parts. <bonsai-searchbar> is built on the same internal control and emits the same part attributes; only the input, suggestions and footer subset is present, since a search bar renders no results.

bonsai-searchbar::part(search-bar) {
  border-radius: 12px;
}

bonsai-searchbar::part(search-input) {
  font-size: 16px;
}

Group	Part	Description
Layout	`outer-container`	Outer container
Layout	`inner-container`	Inner container
Base	`search-wrapper`	Wrapper
Base	`search-bar`	Input container
Base	`search-icon`	Left icon
Base	`search-input`	Input field
Base	`search-actions`	Actions container
Actions	`submit-button`	Submit button
Actions	`clear-button`	Clear-query button
Actions	`close-button`	Close button
Suggestions	`suggestions`	Suggestions container
Suggestions	`suggestion-item`	Suggestion row
Suggestions	`suggestion-text`	Suggestion text
Suggestions	`suggestion-icon`	Suggestion leading icon
Suggestions	`suggestion-image`	Suggestion thumbnail
Suggestions	`suggestion-match`	Matched substring
Footer	`powered-by`	Powered-by container
Footer	`powered-by-link`	Powered-by link
Footer	`powered-by-dot`	Powered-by separator

The complete part list, including everything only <bonsai-search> renders, is in the Bonsai Search parts reference.

Get Started

Web Components

Support

Advanced Styling

CSS Variables

Reference Table

Dark theme

Search Bar Parts

​CSS Variables

​Reference Table

​Dark theme

​Search Bar Parts

CSS Variables

Reference Table

Dark theme

Search Bar Parts