Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hibonsai.com/llms.txt

Use this file to discover all available pages before exploring further.

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:
  1. 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.
  2. 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

VariableDefaultPurpose
--bonsai-brand-color#0A5B3BAccent color for focus, buttons, and highlights
--bonsai-text-color#303030Primary text
--bonsai-suggestions-text-color#303030Suggestions text
--bonsai-input-text-color#303030Input text + icon
--bonsai-suggestions-hover-bgrgba(0, 0, 0, 0.04)Suggestions hover background
--bonsai-muted-color#9CA3AFSecondary text
--bonsai-input-bg#f5f5f5Input + dropdown background
--bonsai-surface-color#ffffffSurface background
--bonsai-canvas-color#fafafaCanvas background
--bonsai-border-colorrgba(0, 0, 0, 0.06)Default border
--bonsai-border-color-hoverrgba(0, 0, 0, 0.12)Hover border
--bonsai-hover-bgrgba(0, 0, 0, 0.04)Hover background
--bonsai-error-bgrgba(220, 53, 69, 0.1)Error background
--bonsai-error-color#c82333Error text
--bonsai-searchbar-aligncenterHorizontal alignment of the inner container (flex-start, center, flex-end)
--bonsai-searchbar-max-width42remMaximum width of the input
--bonsai-searchbar-margin24px 0Vertical 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

GroupPartDescription
Basesearchbar-containerOuter container
Basesearchbar-wrapperWrapper
BasesearchbarInput container
Basesearchbar-iconLeft icon
Basesearchbar-inputInput field
Basesearchbar-actionsActions container
Actionssearchbar-submitSubmit button
Actionssearchbar-closeClose button
Suggestionssearchbar-suggestionsSuggestions container
Suggestionssearchbar-suggestionSuggestion row
Suggestionssearchbar-suggestion-textSuggestion text
Suggestionssearchbar-suggestion-arrowSuggestion icon
Footersearchbar-poweredPowered by container
Footersearchbar-powered-linkPowered by link
Footersearchbar-powered-dotPowered by dot