> ## 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.

# Examples

> Expanded integration walkthroughs, templates, and troubleshooting for Bonsai Search

<Callout color="#0A5B3B" icon="info">
  **Styling note.** In SDK v3.2+, per-tenant theming is delivered by the Settings API — page CSS and CSS custom properties on the host element override those defaults when you need to customize per-embed. Legacy color attributes (`brand-color`, `text-color`, `input-bg`, etc.) are ignored.
</Callout>

All `<bonsai-search>` examples are listed below from minimal setup to full-page templates.

<AccordionGroup>
  <Accordion title="Copy-paste minimal integration">
    This minimal example includes required attributes, event listeners, and a small CSS override.

    ```html theme={null}
    <!-- 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"
      base-url="https://api.hibonsai.com/rest/search/v3/"
    ></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>
    ```
  </Accordion>

  <Accordion title="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.

    ```html theme={null}
    <!-- 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"
        base-url="https://api.hibonsai.com/rest/search/v3/"
      ></bonsai-search>
    </div>
    ```
  </Accordion>

  <Accordion title="Component using CSS variables">
    ```html theme={null}
    <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/"
      theme="dark"
    ></bonsai-search>
    ```
  </Accordion>

  <Accordion title="Full page template (light theme)">
    ```html theme={null}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bonsai Search (Light Theme)</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"
            base-url="https://api.hibonsai.com/rest/search/v3/"
            theme="light"
          ></bonsai-search>
        </div>
      </body>
    </html>
    ```
  </Accordion>

  <Accordion title="Full page template (dark theme)">
    ```html theme={null}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bonsai Search (Dark Theme)</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-card-bg: #ffffff;
            --bonsai-surface-color: #ffffff;
            --bonsai-input-bg: #ffffff;
            --bonsai-input-text-color: #111111;
            --bonsai-suggestions-text-color: #111111;
            --bonsai-results-text-color: #eaeaea;
            --bonsai-card-text-color: #111111;
            --bonsai-muted-color: #6b7280;
            --bonsai-suggestions-hover-bg: rgba(0, 0, 0, 0.06);
            --bonsai-image-object-fit: cover;
          }
        </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"
            base-url="https://api.hibonsai.com/rest/search/v3/"
            theme="dark"
          ></bonsai-search>
        </div>
      </body>
    </html>
    ```
  </Accordion>
</AccordionGroup>

## Next

* For issue resolution, see [Troubleshooting](/project/docs/troubleshooting).
* For release/version notes, see [Changelog](/project/docs/changelog).
