Attributes
The<bonsai-search> web component accepts the following attributes to customize its appearance and behavior:
Reference Table
| Attribute | Required | Default | Notes |
|---|---|---|---|
api-key | Yes | — | Required for all requests |
base-url | No | https://api.hibonsai.com/rest/search/v3/ | API base URL |
placeholder | No | "Describe what you're looking for..." | Input placeholder |
suggestions | No | [] | JSON array string |
max-results | No | 50 | Max results rendered |
timeout-ms | No | 30000 | Request timeout |
render-price | No | false | Shows prices |
render-price-with-title | No | true | Price shown with title |
markdown | No | false | Enables markdown rendering |
theme | No | light | light, dark, or auto |
brand-color | No | #0A5B3B | Primary accent |
text-color | No | #303030 | Primary text |
muted-color | No | #9CA3AF | Secondary text |
input-text-color | No | text-color | Input + icon text |
suggestions-text-color | No | input-text-color | Suggestion text |
suggestions-hover-bg | No | rgba(0, 0, 0, 0.04) | Suggestion hover |
results-text-color | No | text-color | Summary + headers |
card-text-color | No | text-color | Result cards |
results-columns | No | 3 | Results grid columns |
input-bg | No | #f5f5f5 | Input + dropdown bg |
card-bg | No | input-bg | Card background |
surface-color | No | #ffffff | Surfaces |
canvas-color | No | #fafafa | Canvas background |
image-object-fit | No | cover | cover or contain |
featured-items-label | No | "Featured Items" | Header for recommendations |
more-items-label | No | "More Items" | Header when recommendations exist |
items-label | No | "Items" | Header when no recommendations |
Required Attributes
Your Bonsai API key. Required for the search component to function.
API Configuration
The base URL for the Bonsai Search API.
User Experience
The placeholder text displayed in the search input field before the user starts typing.
A JSON array of suggested search queries that appear below the search input. These help guide users to common questions or searches.
The suggestions attribute must be a valid JSON array string. Use single quotes around the attribute value and double quotes for the array items.
The maximum number of search results to display.
The request timeout in milliseconds.
Display Options
A boolean attribute that enables price display in search results. When present, prices will be shown alongside product information.
A boolean attribute that controls whether the price is displayed with the product title.
markdown
Enables markdown rendering in AI summaries and content.
Color theme for the component. Options:
light, dark, or auto.Number of columns in the results grid layout.
CSS object-fit value for product images. Options:
cover or contain.Results Section Labels
The heading text displayed above AI-recommended products.
The heading text displayed above additional results when AI recommendations are present.
The heading text displayed above results when there are no AI recommendations.
Color Customization
For more granular color control, use CSS custom properties. See the Advanced Styling guide for the complete list of CSS variables.
Primary accent color used throughout the component.
Primary text color for content.
Secondary text color for less prominent content.
Text color for input field and icons. Inherits from
text-color if not specified.Text color for suggestion items. Inherits from
input-text-color if not specified.Background color when hovering over suggestion items.
Text color for summary and section headers. Inherits from
text-color if not specified.Text color for result card content. Inherits from
text-color if not specified.Background color for input field and dropdown areas.
Background color for result cards. Inherits from
input-bg if not specified.Background color for elevated surfaces within the component.
Background color for the main canvas area.