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