# Klevu components

> How to use Klevu components with Uniform Canvas

Source: https://docs.uniform.app/docs/integrations/search/klevu/klevu-components

[Klevu](https://www.klevu.com/) provides a list of UI components that allows to integrate Klevu functionality to your solution, see [Klevu Storybook](https://webcomponents.klevu.com/) for more details.

## Starter Kit

[Klevu starter kit](https://github.com/uniformdev/examples/tree/main/examples/klevu-starter) is an example of how Klevu components can be managed via [Uniform Canvas](https://docs.uniform.app/docs/learn/products/canvas).

**Getting started**

- Clone starter kit from the [repository](https://github.com/uniformdev/examples/tree/main/examples/klevu-starter)
- Follow instructions from the readme file

## Available components

### Klevu Init

Initializes Klevu configuration. This component is a root node for Klevu components.

[Read more](https://webcomponents.klevu.com/?path=/docs/guides-usage--docs#react-example) about Klevu initialization.

![Klevu Init component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-init-component.png)

### Klevu Merchandising

Merchandising page with filtering by product category and facets.

Related Klevu Storybook component: [Merchandising](https://webcomponents.klevu.com/?path=/docs/apps-merchandising--docs)

**Slots**

- **content** slot allows to add product results (e.g. [Klevu Product Grid](#klevu-product-grid))

![Klevu Merchandising component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-merchandising-component.png)

### Klevu Search Landing Page

Search page component with filtering by search term and facets.

Related Klevu Storybook component: [Search Landing Page](https://webcomponents.klevu.com/?path=/docs/apps-search-landing-page--docs)

**Slots**

- **content** slot allows to add product results (e.g. [Klevu Product Grid](#klevu-product-grid))

![Klevu Search Landing Page component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-search-landing-page-component.png)

### Klevu Product Grid

Renders product results with a specific number of products per row.

Related Klevu Storybook component: [Product Grid](https://webcomponents.klevu.com/?path=/docs/components-product-grid--docs)

**Slots**

- **productComponent** is a special slot that allows to define template component for each product in the results (e.g. [Klevu Product](#klevu-product))

![Klevu Product Grid component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-product-grid-component.png)

### Klevu Product

Renders a single product record from Klevu response.

Related Klevu Storybook component: [Product](https://webcomponents.klevu.com/?path=/docs/components-product--docs)

![Klevu Product component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-product-component.png)

### Klevu Recommendations

Renders a list of recommended products based on a Klevu Smart Recommendation of 'Home page' type.

Related Klevu Storybook component: [Recommendations](https://webcomponents.klevu.com/?path=/docs/apps-recommendations--docs)

![Klevu Recommendations component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-recommendations-component.png)

### Klevu Category Recommendations

Renders a list of recommended products based on a Klevu Smart Recommendation of 'Category/Collection Page' type.

Related Klevu Storybook component: [Recommendations](https://webcomponents.klevu.com/?path=/docs/apps-recommendations--docs)

![Klevu Category Recommendations component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-category-recommendations-component.png)

### Klevu Product Recommendations

Renders a list of recommended products based on a Klevu Smart Recommendation of 'Product Page' type.

Related Klevu Storybook component: [Recommendations](https://webcomponents.klevu.com/?path=/docs/apps-recommendations--docs)

![Klevu Product Recommendations component.](https://docs.uniform.app/images/integrations/search/klevu/klevu-product-recommendations-component.png)