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 — override any variable on the <bonsai-searchbar> host element (or its container) to customize per-embed. Page CSS wins over the Settings API because Settings-API variables are injected at :host low specificity.

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 (or an ancestor) 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
`--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

Search Bar Parts

The search bar exposes ::part(...) hooks for external styling.

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

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

Search Bar Parts Reference

Group	Part	Description
Base	`searchbar-container`	Outer container
Base	`searchbar-wrapper`	Wrapper
Base	`searchbar`	Input container
Base	`searchbar-icon`	Left icon
Base	`searchbar-input`	Input field
Base	`searchbar-actions`	Actions container
Actions	`searchbar-submit`	Submit button
Actions	`searchbar-close`	Close button
Suggestions	`searchbar-suggestions`	Suggestions container
Suggestions	`searchbar-suggestion`	Suggestion row
Suggestions	`searchbar-suggestion-text`	Suggestion text
Suggestions	`searchbar-suggestion-arrow`	Suggestion icon
Footer	`searchbar-powered`	Powered by container
Footer	`searchbar-powered-link`	Powered by link
Footer	`searchbar-powered-dot`	Powered by dot

Get Started

Web Components

Support

Advanced Styling

CSS Variables

Reference Table

Search Bar Parts

Search Bar Parts Reference

​CSS Variables

​Reference Table

​Search Bar Parts

​Search Bar Parts Reference

CSS Variables

Reference Table

Search Bar Parts

Search Bar Parts Reference