# Component Libraries Explained
Components are the individual building blocks, like hero images and task cards, that make up your widget or microsite. All of our current templates are powered by our Mint and Bedrock component libraries.
Mint components
Widgets and microsites built with Mint components provide customer advocates with the latest Advocate experiences. Most of the current templates use Mint components. If you aren’t sure if you’re using the current component library, you can manually check to make sure and update your library if needed.
To upgrade to Mint components for your **program widget**:
1. From the left navigation menu, select  **\[Engage] → Content**.
2. Select **Edit widgets** on the *widgets* card.
3. Select the name of the widget you want to edit.
4. In the left sidebar menu, select **Packages**.
5. Select  **Add package**.
6. Select **Add** on the *Mint components* card.
To upgrade to Mint components for your **microsite**:
1. From the left navigation menu, select  **\[Engage] → Content.**
2. Select the **Edit settings** button on the *microsite* card.
3. Under the *Site Hosting* heading, navigate to the *Packages* section.
4. Select  **Add package**.
5. Select **Add** on the *Mint components* card.
6. Select **Save**.
Bedrock components
All templates powered by Mint components also have the Bedrock component package installed. Bedrock components can’t be seen by participants, but they offer the ability to add advanced logic to your design. They can conditionally show other components and define which program a component sources data from. You can find the Bedrock components package in the *Advanced components* section within the *Add* tab in the Widget or Microsite Editor.
There are two components in the Bedrock component package:
**Conditional section**
The *conditional section* component lets you include conditional content based on a participant’s email, country, segment, or custom field. Insert a JSONata expression in the *Condition* box to set the display conditions. Then, move any content you want displayed to a specific group of participants within the conditional section.
**Program section**
The *program section* component allows you to override the program ID of its child components. Use it to display content that isn’t linked to a specific program. The *Program section* component is included in most widget and microsite templates by default.
Custom component libraries
You can build and use your own component packages to further customize your Advocate experience. These components can be added to any template and used alongside Advocate-provided components.
Advocate widgets use standard HTML and [web components](https://www.webcomponents.org/) . To use your own components in our widget editor, they must be written as web components.
To begin building your widget with custom components, install your custom package:
1. From the left navigation menu, select  **\[Engage] → Content**.
2. Select **Edit widgets** on the widgets card.
3. Select the name of the widget you want to edit.
4. In the left sidebar menu, select **Packages**.
5. Select  **Add package**.
6. Select  **Add from NPM**.
7. Enter the package *name*, *version* and *file path*.
8. Select **Add**.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.impact.com/brand/readme/advocate-program/manage-advocate-participant-experiences/component-libraries-explained.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.