Skip to main content

​
Outer Container

If you want to customize the layout and styling, wrap the component in a container and add custom CSS.

Example:

<style>
  .bonsai-search-outer-container {
    width: 100%;
    max-width: 42rem;
    margin: 4rem auto;
    min-height: 350px;
  }
</style>

<div class="bonsai-search-outer-container">
  <bonsai-search
    api-key="API-KEY"
    base-url="https://api.hibonsai.com/rest/search/v3/"
    placeholder="Describe what you're looking for..."
    suggestions='[
      "Which product is best for my space?",
      "What features does this product have?",
      "How does this product work?",
      "How often do I need to replace the filters in my (product name)?",
      "Can I buy products with my FSA/HSA?"
    ]'
    max-results="20"
    render-price
  brand-color="#0A5B3B"
  text-color="#303030"
  muted-color="#9CA3AF"
  ></bonsai-search>
</div>

​
CSS Variables

The web component uses a closed shadow root, but CSS custom properties still pass through. You can set any --bonsai-* variables directly on the <bonsai-search> element if you prefer CSS-only customization.

Example:

<bonsai-search
  style="
    --bonsai-font-body: 'Space Grotesk', sans-serif;
    --bonsai-font-heading: 'Space Grotesk', sans-serif;
    --bonsai-font-mono: 'IBM Plex Mono', monospace;
    --bonsai-search-max-width: 100%;
    --bonsai-text-color: #111111;
    --bonsai-muted-color: #6b7280;
    --bonsai-input-bg: #ffffff;
    --bonsai-input-text-color: #111111;
    --bonsai-suggestions-text-color: #111111;
    --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
    --bonsai-results-text-color: #eaeaea;
    --bonsai-card-text-color: #111111;
  "
  api-key="API-KEY"
  base-url="https://api.hibonsai.com/rest/search/v3/"
  placeholder="Ask a question..."
  suggestions='[
    "What is your return policy?",
    "Which product is best for me?",
    "Do you offer gift cards?"
  ]'
  theme="dark"
></bonsai-search>

​
Reference Table

Defaults shown are for the light theme. The dark theme automatically overrides color and shadow variables.
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-results-text-color#303030Summary + section headers
--bonsai-card-text-color#303030Result card text
--bonsai-muted-color#9ca3afSecondary text
--bonsai-input-bg#f5f5f5Input + dropdown background
--bonsai-card-bg#f5f5f5Result card background
--bonsai-canvas-color#fafafaPage/canvas background
--bonsai-surface-color#ffffffSurface 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-suggestions-hover-bgrgba(0, 0, 0, 0.04)Suggestions hover
--bonsai-error-bgrgba(220, 53, 69, 0.1)Error background
--bonsai-error-color#c82333Error text
--bonsai-space-10.25remSpacing token
--bonsai-space-20.5remSpacing token
--bonsai-space-30.75remSpacing token
--bonsai-space-41remSpacing token
--bonsai-space-51.25remSpacing token
--bonsai-space-61.5remSpacing token
--bonsai-font-headingsystem-ui, -apple-system, sans-serifHeading font
--bonsai-font-bodysystem-ui, -apple-system, sans-serifBody font
--bonsai-font-monoui-monospace, monospaceMono font
--bonsai-font-size-xs0.75remText size
--bonsai-font-size-sm0.875remText size
--bonsai-font-size-base1remText size
--bonsai-font-size-lg1.125remText size
--bonsai-font-size-xl1.25remText size
--bonsai-radius-none0Radius token
--bonsai-radius-sm0.25remRadius token
--bonsai-radius-md0.375remRadius token
--bonsai-radius-lg0.5remRadius token
--bonsai-radius-xl0.75remRadius token
--bonsai-radius-full9999pxFull radius
--bonsai-duration-fast150msAnimation timing
--bonsai-duration-base200msAnimation timing
--bonsai-duration-slow300msAnimation timing
--bonsai-easingcubic-bezier(0, 0, 0.2, 1)Animation easing
--bonsai-shadow-sm0 1px 2px 0 rgb(0 0 0 / 0.05)Shadow token
--bonsai-shadow-md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)Shadow token
--bonsai-shadow-lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)Shadow token
--bonsai-search-min-height3.5remSearch bar height
--bonsai-search-max-width42remMax container width
--bonsai-icon-size1.25remIcon size
--bonsai-icon-size-sm1remSmall icon size
--bonsai-results-columns3Results grid columns
--bonsai-image-object-fitcoverImage sizing mode

​
Color

​
--bonsai-brand-color
default:"#0a5b3b"
Accent color used for focus states, buttons, and highlights throughout the component.
​
--bonsai-text-color
default:"#303030"
Primary text color for main content.
​
--bonsai-input-text-color
default:"#303030"
Text color for input field and search icon.
​
--bonsai-suggestions-text-color
default:"#303030"
Text color for suggestion items.
​
--bonsai-results-text-color
default:"#303030"
Text color for AI summary and section headers.
​
--bonsai-card-text-color
default:"#303030"
Text color for result card content.
​
--bonsai-muted-color
default:"#9ca3af"
Secondary text color for less prominent content.
​
--bonsai-input-bg
default:"#f5f5f5"
Background color for input field and dropdown areas.
​
--bonsai-card-bg
default:"#f5f5f5"
Background color for result cards.
​
--bonsai-canvas-color
default:"#fafafa"
Background color for the main canvas area.
​
--bonsai-surface-color
default:"#ffffff"
Background color for elevated surfaces.
​
--bonsai-border-color
default:"rgba(0, 0, 0, 0.06)"
Default border color.
​
--bonsai-border-color-hover
default:"rgba(0, 0, 0, 0.12)"
Border color on hover state.
​
--bonsai-hover-bg
default:"rgba(0, 0, 0, 0.04)"
Background color for hover states.
​
--bonsai-suggestions-hover-bg
default:"rgba(0, 0, 0, 0.04)"
Background color when hovering over suggestion items.
​
--bonsai-error-bg
default:"rgba(220, 53, 69, 0.1)"
Background color for error states.
​
--bonsai-error-color
default:"#c82333"
Text color for error messages.

​
Spacing

​
--bonsai-space-1
default:"0.25rem"
Smallest spacing unit (4px).
​
--bonsai-space-2
default:"0.5rem"
Extra small spacing unit (8px).
​
--bonsai-space-3
default:"0.75rem"
Small spacing unit (12px).
​
--bonsai-space-4
default:"1rem"
Base spacing unit (16px).
​
--bonsai-space-5
default:"1.25rem"
Medium spacing unit (20px).
​
--bonsai-space-6
default:"1.5rem"
Large spacing unit (24px).

​
Typography

​
--bonsai-font-heading
default:"system-ui, -apple-system, sans-serif"
Font family for headings and section titles.
​
--bonsai-font-body
default:"system-ui, -apple-system, sans-serif"
Font family for body text.
​
--bonsai-font-mono
default:"ui-monospace, monospace"
Font family for monospace text.
​
--bonsai-font-size-xs
default:"0.75rem"
Extra small font size (12px).
​
--bonsai-font-size-sm
default:"0.875rem"
Small font size (14px).
​
--bonsai-font-size-base
default:"1rem"
Base font size (16px).
​
--bonsai-font-size-lg
default:"1.125rem"
Large font size (18px).
​
--bonsai-font-size-xl
default:"1.25rem"
Extra large font size (20px).

​
Border Radius

​
--bonsai-radius-none
default:"0"
No border radius.
​
--bonsai-radius-sm
default:"0.25rem"
Small border radius (4px).
​
--bonsai-radius-md
default:"0.375rem"
Medium border radius (6px).
​
--bonsai-radius-lg
default:"0.5rem"
Large border radius (8px).
​
--bonsai-radius-xl
default:"0.75rem"
Extra large border radius (12px).
​
--bonsai-radius-full
default:"9999px"
Full border radius for pill-shaped elements.

​
Animation

​
--bonsai-duration-fast
default:"150ms"
Fast animation duration for quick transitions.
​
--bonsai-duration-base
default:"200ms"
Base animation duration for standard transitions.
​
--bonsai-duration-slow
default:"300ms"
Slow animation duration for emphasized transitions.
​
--bonsai-easing
timing-function
default:"cubic-bezier(0, 0, 0.2, 1)"
Easing function for smooth animations.

​
Shadow

​
--bonsai-shadow-sm
shadow
default:"0 1px 2px 0 rgb(0 0 0 / 0.05)"
Small shadow for subtle elevation.
​
--bonsai-shadow-md
shadow
Medium shadow for moderate elevation.
​
--bonsai-shadow-lg
shadow
Large shadow for prominent elevation.

​
Layout

​
--bonsai-search-min-height
default:"3.5rem"
Minimum height for the search bar (56px).
​
--bonsai-search-max-width
default:"42rem"
Maximum width for the search container (672px).
​
--bonsai-icon-size
default:"1.25rem"
Standard icon size (20px).
​
--bonsai-icon-size-sm
default:"1rem"
Small icon size (16px).
​
--bonsai-results-columns
default:"3"
Number of columns in the results grid layout.
​
--bonsai-image-object-fit
default:"cover"
CSS object-fit value for product images. Options: cover or contain.

​
Shadow Parts

The web component uses a closed shadow root, but it exposes stable part hooks for external styling. This lets you style specific inner elements with ::part(...) from outside the component. ::part(...) is supported in modern evergreen browsers. For older browsers, prefer CSS variables or wrapper styling. Example (full part customization): 
<style>
  bonsai-search::part(search-wrapper) {
    padding: 1.5rem;
    border: 1px solid #262626;
    border-radius: 18px;
    background: linear-gradient(180deg, #0b0b0b 0%, #0f0f0f 100%);
  }

  bonsai-search::part(search-bar) {
    border-radius: 14px;
    border: 1px solid #303030;
    background: #111111;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  bonsai-search::part(search-icon) {
    color: #c9a77a;
  }

  bonsai-search::part(search-input) {
    color: #f7f3ee;
    letter-spacing: 0.01em;
  }

  bonsai-search::part(search-actions) {
    gap: 0.25rem;
  }

  bonsai-search::part(submit-button) {
    background: #c9a77a;
    color: #111111;
    border-radius: 10px;
  }

  bonsai-search::part(loading-state) {
    background: #161616;
    border-radius: 10px;
  }

  bonsai-search::part(loading-text) {
    color: #c9a77a;
  }

  bonsai-search::part(loading-text-inner) {
    font-weight: 600;
  }

  bonsai-search::part(spinner) {
    color: #c9a77a;
  }

  bonsai-search::part(done-state) {
    background: #142218;
    border-radius: 10px;
  }

  bonsai-search::part(done-text) {
    color: #a7f3d0;
  }

  bonsai-search::part(done-icon) {
    color: #34d399;
  }

  bonsai-search::part(reset-button) {
    border-radius: 10px;
    border: 1px solid #2a2a2a;
  }

  bonsai-search::part(reset-text) {
    color: #e5e7eb;
  }

  bonsai-search::part(reset-icon) {
    color: #9ca3af;
  }

  bonsai-search::part(suggestions) {
    background: #101010;
    border: 1px solid #2a2a2a;
  }

  bonsai-search::part(suggestion-item) {
    border-radius: 10px;
  }

  bonsai-search::part(suggestion-text) {
    color: #f3f4f6;
  }

  bonsai-search::part(suggestion-arrow) {
    color: #c9a77a;
  }

  bonsai-search::part(powered-by) {
    color: #9ca3af;
  }

  bonsai-search::part(results) {
    padding: 1rem 0 0 0;
  }

  bonsai-search::part(results-section) {
    border-top: 1px dashed #2a2a2a;
    padding-top: 1.25rem;
  }

  bonsai-search::part(results-header) {
    color: #c9a77a;
  }

  bonsai-search::part(results-grid) {
    gap: 1.25rem;
  }

  bonsai-search::part(summary) {
    padding: 1rem 1.25rem;
    border-radius: 14px;
    background: #0f0f0f;
    border: 1px solid #262626;
  }

  bonsai-search::part(summary-text) {
    color: #e5e7eb;
  }

  bonsai-search::part(recommendation-products) {
    margin-top: 1rem;
  }

  bonsai-search::part(recommendation-products-header) {
    color: #c9a77a;
    letter-spacing: 0.06em;
  }

  bonsai-search::part(result-card) {
    background: #111111;
    border: 1px solid #262626;
    border-radius: 16px;
    overflow: hidden;
  }

  bonsai-search::part(result-image-wrapper) {
    background: #0b0b0b;
  }

  bonsai-search::part(result-image) {
    filter: saturate(0.95);
  }

  bonsai-search::part(result-content) {
    padding: 0.75rem 0.9rem;
  }

  bonsai-search::part(result-title) {
    color: #f9fafb;
  }

  bonsai-search::part(result-price-container) {
    gap: 0.35rem;
  }

  bonsai-search::part(result-price) {
    color: #c9a77a;
  }

  bonsai-search::part(result-compare-at) {
    color: #6b7280;
  }

  bonsai-search::part(result-caption) {
    color: #d1d5db;
  }

  bonsai-search::part(recommendations-loading) {
    border: 1px dashed #2a2a2a;
    border-radius: 12px;
  }

  bonsai-search::part(recommendations-loading-spinner) {
    color: #c9a77a;
  }

  bonsai-search::part(recommendations-loading-text) {
    color: #e5e7eb;
  }

  bonsai-search::part(empty-state) {
    color: #9ca3af;
    background: #0f0f0f;
    border-radius: 12px;
    padding: 1rem;
  }

  bonsai-search::part(error) {
    background: #2a0f12;
    border: 1px solid #7f1d1d;
    color: #fecaca;
    padding: 0.75rem 1rem;
    border-radius: 10px;
  }
</style>

​
Reference Table

GroupPartDescription
Searchsearch-wrapperOuter wrapper
Searchsearch-barInput container
Searchsearch-iconLeft icon
Searchsearch-inputInput field
Searchsearch-actionsAction button container
Searchsubmit-buttonSubmit action
Searchloading-stateLoading pill
Searchloading-textLoading text
Searchloading-text-innerEmphasized loading text
SearchspinnerLoading spinner
Searchdone-stateDone pill
Searchdone-textDone text
Searchdone-iconDone icon
Searchreset-buttonReset action
Searchreset-textReset text
Searchreset-iconReset icon
SuggestionssuggestionsSuggestions container
Suggestionssuggestion-itemSuggestion row
Suggestionssuggestion-textSuggestion text
Suggestionssuggestion-arrowSuggestion icon
Footerpowered-byPowered by footer
ResultsresultsResults container
Resultsresults-sectionResults section
Resultsresults-headerResults header
Resultsresults-gridResults grid
ResultssummaryAI summary container
Resultssummary-textAI summary text
Resultsrecommendation-productsRecommendations block
Resultsrecommendation-products-headerRecommendations header
Cardsresult-cardResult card
Cardsresult-image-wrapperResult image wrapper
Cardsresult-imageResult image
Cardsresult-contentResult content
Cardsresult-titleResult title
Cardsresult-price-containerPrice wrapper
Cardsresult-pricePrice
Cardsresult-compare-atCompare-at price
Cardsresult-captionDescription
Statesrecommendations-loadingRecommendations loading container
Statesrecommendations-loading-spinnerRecommendations spinner
Statesrecommendations-loading-textRecommendations text
Statesempty-stateEmpty state
StateserrorError state

​
Customization Tips

​
Theme Defaults vs. Overrides

theme="light" (default) and theme="dark" set a full palette of sensible defaults for surfaces, borders, shadows, and text. Any explicit color props (like text-color, input-bg, or card-bg) override those defaults. theme="auto" uses the visitor’s system preference (prefers-color-scheme) and still respects any explicit overrides.

​
Attributes vs. CSS Variables

Use attributes for simple configuration and consistent defaults. Use CSS variables when you want to theme multiple values at once, share a design system across multiple components, or adjust tokens like spacing, shadows, and typography.

​
Wrapper Styling

The example includes a wrapper <div> with custom CSS to control the component’s width and positioning. You can modify these styles to match your site’s layout: 
.bonsai-search-outer-container {
  width: 100%;
  max-width: 42rem; /* Adjust maximum width */
  margin: 4rem auto; /* Adjust vertical and horizontal spacing */
  min-height: 350px; /* Ensure minimum height for layout stability */
}

​
Color Scheme

Choose colors that match your brand identity. The component uses your specified colors throughout the interface:
  • Brand color: Used for primary actions and highlights
  • Text color: Used for main content text
  • Muted color: Used for secondary information
  • Background colors: Control the overall appearance
    • input-bg affects the input and the dropdown background
    • card-bg affects result cards
    • surface-color and canvas-color control larger surfaces

​
Suggestions Best Practices

Create suggestions that:
  • Address common customer questions
  • Highlight popular products or features
  • Use natural, conversational language
  • Are specific to your product catalog