---
title: Search
description: "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."
api_name: shop-minis
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

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

### Examples

* #### Search

  ##### Default

  ```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>
    )
  }
  ```

* #### Default search

  ##### Description

  A component that has all the features of a product search

  ##### Default

  ```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>
    )
  }
  ```

* #### Custom search

  ##### Description

  A composable way to build a search screen

  ##### Default

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

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