---
title: Search
description: Product search with automatic debouncing via useProductSearch hook.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/search'
  md: 'https://shopify.dev/docs/api/shop-minis/components/commerce/search.md'
---

# Search

Product search with automatic debouncing via `useProductSearch` hook. Two usage patterns: all-in-one `Search` component (fastest setup, fixed layout) or composable `SearchProvider` + `SearchInput` + `SearchResultsList` (custom layouts, shared search state). The all-in-one component handles input, loading skeletons, empty states, and infinite scroll. Use composable approach when you need custom result rendering or multiple search-dependent sections.

#### Props

* **children**

  **React.ReactNode**

  **required**

* **initialQuery**

  **string**

Examples

## Preview

![search](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Search-LNQULaaC.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import React from 'react'
  import {Search} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="w-full h-[600px]">
        <Search initialQuery="shirt" />
      </div>
    )
  }
  ```

* ####

  ##### Description

  A component that has all the features of a product search

  ##### tsx

  ```tsx
  import React from 'react'
  import {Search} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <div className="w-full h-[600px]">
        <Search initialQuery="shirt" />
      </div>
    )
  }
  ```

* ####

  ##### Description

  A composable way to build a search screen

  ##### tsx

  ```tsx
  import {
    SearchProvider,
    SearchInput,
    SearchResultsList,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <SearchProvider>
        <SearchInput placeholder="Search products..." />
        <SearchResultsList />
      </SearchProvider>
    )
  }
  ```

***