# Smart Component

With the Smart Component, you can select the content you wish to showcase and determine the pre-designed component it appears on, all directly from your API. This innovative feature empowers the creation of custom-tailored UX, UI, and content for your users.

### Prerequisites

1. Implement the Curation API feature and add the feeds to the layout. Here's the full [guide](/integrations/curation-api).

3. Add the Smart Component plugin to the version.

![](./super-component/smart_component_plugin.png)

4. Create reference presets. More info about presets can be found [here](/using-zapp/building-blocks/presets#creating-preset-components-and-screens).

Similar to screen type mapping, map all the component presets that you plan to use in the curation API. The `REFERENCE NAME` will be used in the curation feed as the preset name (see below for details).

![](./super-component/presets-type-mapping.png)

5. Add the Smart Component to the screen and add your curation feed in the data source field.

![](./super-component/add_smart_component.png)