---
title: "Prototyping components"
slug: "prototyping-components"
abstract: "Create new components or modify existing components using the Component builder."
---
# Prototyping components

The Component builder is a powerful tool that lets you create new components or modify already existing components using an intuitive WYSIWYG builder. It also lets you store the components in organized collections. 

With the builder, you can:

- Add and position visual elements including content onto the component’s canvas.
- Create responsive components that render different versions for different screen widths.
- Configure the elements of the component by:  
    - Applying style rules previously set in the Styles library to [each element individually](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/style-a-single-element-and-text.html "Style a single element and text"), or to the [component as a whole](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/styling-components/style-a-component-with-a-theme.html "Style a component with a theme").
    - Defining [layout, dimensions, and spacing](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/prototyping-components/configuring-an-element.html "Configuring an element") for the element. 
    - [Mapping dynamic content](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/manage-dynamic-content.html "Manage dynamic content") from a data source.

> [!tip]
> To learn more about how to create a responsive bundle, see the tutorials available on the [Discover Sitecore](https://www.youtube.com/watch?v=vQPksrMUnzM) channel. Since the video was made, [adding custom CSS features](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/creating-your-styles-library/add-custom-fonts-and-styles.html "Add custom fonts and styles"), such as on-brand icons, has been enabled.