Examples

Copy-paste minimal integration

This minimal example includes required attributes, event listeners, and a small CSS override.

<!-- Load Bonsai Search Web Component -->
<script
  src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
  defer
></script>

<style>
  bonsai-search {
    --bonsai-brand-color: #0a5b3b;
    --bonsai-search-max-width: 42rem;
  }
</style>

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

<script>
  const search = document.querySelector("bonsai-search");

  search.addEventListener("search", (event) => {
    console.log("Search submitted:", event.detail.query);
  });

  search.addEventListener("results", (event) => {
    console.log("Results received:", event.detail.results.length);
  });

  search.addEventListener("error", (event) => {
    console.error("Search error:", event.detail.error);
  });
</script>

Full example with wrapper styling

This example wraps the component in a container with custom CSS for layout and theming. Colors are set via CSS custom properties on the host element.

<!-- Load Bonsai Search Web Component -->
<script
  src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
  defer
></script>

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

  bonsai-search {
    --bonsai-brand-color: #0A5B3B;
    --bonsai-text-color: #303030;
    --bonsai-muted-color: #9CA3AF;
  }
</style>

<div class="bonsai-search-outer-container">
  <bonsai-search
    api-key="API-KEY"
    theme="light"
  ></bonsai-search>
</div>

Component using CSS variables

<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: #111111;
    --bonsai-card-text-color: #111111;
  "
  api-key="API-KEY"
  theme="light"
></bonsai-search>

Full page template — default palette

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bonsai Search</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      .bonsai-search-outer-container {
        width: 100%;
        max-width: 1200px;
        margin: 4rem auto;
        min-height: 350px;
      }

      bonsai-search {
        --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-brand-color: #0A5B3B;
        --bonsai-text-color: #111111;
        --bonsai-muted-color: #6b7280;
        --bonsai-input-bg: #f5f5f5;
        --bonsai-input-text-color: #111111;
        --bonsai-suggestions-text-color: #111111;
        --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
        --bonsai-card-bg: #ffffff;
        --bonsai-surface-color: #ffffff;
        --bonsai-canvas-color: #fafafa;
        --bonsai-image-object-fit: cover;
      }
    </style>
    <script
      src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
      defer
    ></script>
  </head>
  <body style="background: #ffffff">
    <div class="bonsai-search-outer-container">
      <bonsai-search
        api-key="API-KEY"
        theme="light"
      ></bonsai-search>
    </div>
  </body>
</html>

Full page template — custom palette

A black page with a dark palette of your own. theme="light" selects the palette the CSS below is allowed to replace — Dark theme explains why, and what happens if you reach for theme="dark" instead.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bonsai Search</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <style>
      .bonsai-search-outer-container {
        width: 100%;
        max-width: 1200px;
        margin: 4rem auto;
        min-height: 350px;
      }

      bonsai-search {
        --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-image-object-fit: cover;

        --bonsai-brand-color: #20a67a;
        --bonsai-text-color: #f5efe7;
        --bonsai-results-text-color: #eaeaea;
        --bonsai-card-text-color: #111111;
        --bonsai-card-bg: #f4f3f1;
        --bonsai-surface-color: #0f1012;
        --bonsai-canvas-color: #000000;
        --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-muted-color: #6b7280;

        --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-error-bg: rgba(248, 113, 113, 0.15);
        --bonsai-error-color: #fca5a5;
        --bonsai-skeleton-base: rgba(255, 255, 255, 0.04);
        --bonsai-skeleton-highlight: rgba(255, 255, 255, 0.08);
        --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>
    <script
      src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-latest.js"
      defer
    ></script>
  </head>
  <body style="background: #000000">
    <div class="bonsai-search-outer-container">
      <bonsai-search api-key="API-KEY" theme="light" markdown></bonsai-search>
    </div>
  </body>
</html>

Get Started

Web Components

Support

Next

​Next

Next