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

# Adding the CategoryPage to your site

## The CategoryPage component

After setting up dynamic routing to your product listing pages pages, you must set up and configure your product listing pages using the `CategoryPage` component. Import the component from the Depict UI and nest it into your applications category page component.

```tsx tsx theme={null}
import { CategoryPage } from "@depict-ai/react-ui";
import ProductCard from "./ProductCard";

function Category() {
  return (
    <div>
      <CategoryPage
        listingQuery={{ type: "listingId", id: YOUR_LISTING_ID }}
        productCard={ProductCard}
      />
    </div>
  );
}

export default Category;

```

* The `productCard` prop accepts your custom `ProductCard` component that receives and renders your category data.
* The `listingQuery` prop accepts the unique identifier for the current category/collection, see [the last page](/react-ui-guide/listings/id-source-of-truth).

<Tip>To change what category the `CategoryPage` component is displaying, change the `listingQuery` prop to the new category's unique identifier. Make sure to update it as the user navigates.</Tip>

<Note>Review the types or <u>[reference](/reference/listing-sdk/listing-page-react-sdk#the-categorypage-component)</u> for other <b>configurable properties</b></Note>

## Different layout possibilities

The default configuration displays the current category title above the product cards.
<i>If</i> you want to render the title of the category yourself, do the following to remove the default title and also make the CategoryPage as compact as possible:

```tsx theme={null}
import { EmbeddedNumProducts } from "@depict-ai/react-ui"; // <- Add this import

 <CategoryPage
    listingQuery={{ type: "listingId", id: "LISTING_ID" }}
    productCard={ProductCard}
    categoryTitlePlugin={EmbeddedNumProducts} // <- Add this property
  />

```

<Frame caption="The CategoryPage in its most compact version, optimizing for the content being above the fold">
  <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/listing/category-page-compact.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=6f154692432f8d90c3fd66d42108bd86" alt="The compact CategoryPage: the breadcrumb, the QuickLinks row, then a toolbar with the product count between the Filter and Sort buttons, directly above the product grid, with no title row" width="2784" height="2380" data-path="images/listing/category-page-compact.png" />
</Frame>

<Check>
  Product listing pages are done: you can navigate between categories and collections and browse products. Next, [set up tracking](/react-ui-guide/tracking/introduction).
</Check>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.