> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> An overview of the search components and flow

## There's two main parts to adding Depict UI Search to your site:

1. Adding a search field or button to your site
2. Adding a search results page to your site

## This will result in the following flow for the user:

#### <span style={{"font-size": "2em"}}>👇</span> 1. The user clicks on the search button or search field.

<CardGroup cols={2}>
  <Frame caption="SearchField">
    <div style={{display:"flex", flexDirection: "column", gap:"16px"}}>
      <img
        src="https://cdn.statically.io/gh/depict-org/documentation-images/main/new-search-field.svg"
        style={{aspectRatio: 1920/162.667, width: "100%"}}
        ref={element => {
           // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
           const direct_parent = element?.parentElement;
           if(direct_parent?.matches?.("[data-rmiz-content]")) {
               Object.assign(direct_parent.style, {
                   width: "100%",
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
               })
           }
           const parents_parent = direct_parent?.parentElement;
           if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
               parents_parent.style.width = "100%";
           }
       }}
      />

      or

      <img
        src="https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=9a397cf61021bdc379d23c3cb87649e4"
        style={{aspectRatio: 1083/81, width: "100%"}}
        ref={element => {
           // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
           const direct_parent = element?.parentElement;
           if(direct_parent?.matches?.("[data-rmiz-content]")) {
               Object.assign(direct_parent.style, {
                   width: "100%",
                   display: "flex",
                   justifyContent: "center",
                   alignItems: "center"
               })
           }
           const parents_parent = direct_parent?.parentElement;
           if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
               parents_parent.style.width = "100%";
           }
       }}
        data-og-width="1083"
        width="1083"
        data-og-height="81"
        height="81"
        data-path="images/search_field.svg"
        data-optimize="true"
        data-opv="3"
        srcset="https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=280&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=fd4ca5ae3d530da6d286e4195f719a47 280w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=560&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=9fd7422a4a82f474b5a84f6dd06dd361 560w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=840&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=3acd4cefdddd958e5328cfe8032ebf90 840w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=1100&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=80e0c3443c154585cee2f5a7839372cb 1100w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=1650&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=b5a36ea338ae7b1198b55bb7a87a05b6 1650w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_field.svg?w=2500&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=9b73258d708a3eddf5d8754288e1b700 2500w"
      />
    </div>
  </Frame>

  <Frame caption="A search button">
    <img src="https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_button.svg?fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=0c387741cdb3c74ae9e434833e006c65" width="30" height="30" data-path="images/search_button.svg" />
  </Frame>
</CardGroup>

#### <span style={{"font-size": "2em"}}>👇</span> 2. The search modal opens, this is what the user sees while typing a query.

<CardGroup cols={2}>
  <Frame caption="Modal V2, Click to enlarge">
    <img
      src="https://cdn.statically.io/gh/depict-org/documentation-images/main/new-search-modal2.svg"
      style={{aspectRatio: 4800/2793.333, width: "100%"}}
      ref={element => {
    // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
    const direct_parent = element?.parentElement;
    if(direct_parent?.matches?.("[data-rmiz-content]")) {
        Object.assign(direct_parent.style, {
            width: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        })
    }
    const parents_parent = direct_parent?.parentElement;
    if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
        parents_parent.style.width = "100%";
    }
}}
    />
  </Frame>

  <Frame caption="Classic modal, click to enlarge">
    <img
      src="https://cdn.statically.io/gh/depict-org/documentation-images/main/old-search-modal2.svg"
      style={{aspectRatio: 2594.667/3165.333, width: "100%"}}
      ref={element => {
    // In prod, they have some zoom thing which breaks aspectRatio, work around that. Unfortunately this is not in the SSR'd output so there's still some CLS.
    const direct_parent = element?.parentElement;
    if(direct_parent?.matches?.("[data-rmiz-content]")) {
        Object.assign(direct_parent.style, {
            width: "100%",
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
        })
    }
    const parents_parent = direct_parent?.parentElement;
    if(parents_parent?.matches?.("[aria-owns^='rmiz-modal']")) {
        parents_parent.style.width = "100%";
    }
}}
    />
  </Frame>
</CardGroup>

The SearchModal can either <b>align</b> to the SearchField that was used to open it, an arbitrary element, or the center of the screen.

You can choose which of the SearchModal variants you want to use. The v2 modal is the default, follow [these steps](/other-guides/introduction#switching-to-the-classic-search-modal) to use the classic one.

#### <span style={{"font-size": "2em"}}>👇</span> 3. The user submits a query and goes to a new URL, like `/search`

<Frame caption="The SearchPage which displays the results along with sorting options, filters and search recommendations">
  <img
    src="https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=21ca8d92736e38c11d80098ea01b7a79"
    noZoom
    style={{aspectRatio: 1960/5365, width: "100%"}}
    ref={async element => {
    if(!element) return;

    // Fix background color in dark mode while still having cool, transparent light mode background
    if(!window.utilishared_promise) {
        window.utilishared_promise = new Promise(resolve => {
            window.resolve_utilishared = resolve;
            const script = document.createElement("script");
            script.type = "module";
            script.append(`
        import * as utilishared from "https://esm.run/@depict-ai/utilishared@latest/latest";
        window?.resolve_utilishared(utilishared);
        `)
            document.head.append(script);
        })
    }

    const utilishared = await utilishared_promise;

    const { style } = element;
    const update_styling = () => {
        const dark = document.documentElement.classList.contains("dark");
        style.background = dark ? "white" : "";
        style.padding = dark ? "10px" : "";
        style.borderRadius = dark ? "0.75rem" : "";
    };
    const m_o = new MutationObserver(utilishared.catchify(update_styling));
    m_o.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ["class"]
    })
    update_styling();
    utilishared.observer.onremoved(element, () => m_o.disconnect());
}}
    data-og-width="1960"
    width="1960"
    data-og-height="5365"
    height="5365"
    data-path="images/search_page.svg"
    data-optimize="true"
    data-opv="3"
    srcset="https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=280&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=d39b747fdcefceabf35bd5e84d97ef0c 280w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=560&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=44e062bce348a964d58a8959dbffd7c2 560w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=840&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=e16c3c063b5fdd1f00a6b093b7a3fd23 840w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=1100&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=2c93d9e33c8f63af20110c13694da6a5 1100w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=1650&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=9a3a33a6402ce370eb133966b8cc705b 1650w, https://mintcdn.com/depictai/dKQO16GUhxQY4bIk/images/search_page.svg?w=2500&fit=max&auto=format&n=dKQO16GUhxQY4bIk&q=85&s=b2b326b88f36fe8c3789c633b98a63e4 2500w"
  />
</Frame>