# First Steps with ThemeBuilder
In this ThemeBuilder tutorial, you will learn how to make your first steps with the tool, and then you will discover its advanced features.
By using [ThemeBuilder](https://www.telerik.com/themebuilder), you will create your custom UI components and build visual styles to make them match the design requirements of your project. The steps in this tutorial represent the standard workflow that you can follow when working with ThemeBuilder.
> note Most steps in this tutorial require an active free trial license or a [ThemeBuilder subscription](https://www.telerik.com/themebuilder/documentation/introduction#themebuilder-tiers).
## Prerequisites
To follow the steps in this tutorial, you need a Telerik account. If you don't have a Telerik account yet, [register](https://www.telerik.com/login/themebuilder#register) and start your free ThemeBuilder trial in a single step.
Don't worry if you do not have a ThemeBuilder subscription. You can start a free trial by following the instructions in this guide.
## Creating a Blank Project
To start building your UI components and styles, you must create a blank ThemeBuilder project. ThemeBuilder is a cloud application, and it automatically saves the changes in your project as you make them. You can also share your projects with colleagues and collaborate.
To create a new blank ThemeBuilder project:
1. Navigate to [ThemeBuilder](https://themebuilderapp.telerik.com/).
2. Enter the credentials for your [Telerik account](https://www.telerik.com/account/) and log in.
3. Click the **Create New Project** button.
4. Choose the **Start from scratch** tab.
5. Enter **My First Project** as a name for your project and then select the **Blank** project type.
6. Finally, click **Create New Project**.
After creating the project, you will see the ThemeBuilder workspace:
* The UI components, when added, are in the center of the screen. These are live components—any change to their styles is immediately rendered on the screen.
* The variables are in the **STYLES** pane on the left-hand side of the screen. These variables let you reuse colors, metrics, and typographies, allowing you to scale any changes in your component styles.
## (Optional) Activating Your Free Trial
This tutorial demonstrates various features that require the ThemeBuilder subscription or a free trial license. If you already have access to the paid features, continue to the [Customizing Theme Variables](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-blank#customizing-theme-variables) section.
To activate your free trial:
1. Locate and click the **Start Trial** banner in the toolbar or one of the star icons in your ThemeBuilder project, for example:
* Click the banner on the top of the ThemeBuilder screen.
* Click the star icon near **Typographies** and **Colors** on the left of the screen.
2. In the new window that opens, click **Start a Trial**. Then accept the license agreement.
## Creating Variables
Adding new variables gives you endless possibilities to style the UI components as you like or as required by the application design.
To create the custom variables for this tutorial:
1. Navigate to the **STYLES** pane and click the **+** button next to the **Color** section.
2. In the **ADD COLOR** editor:
2.1. Enter `Custom variables` as a category name and `--button-border` as the name of the new variable.
2.2. Enter `#DBE3ED` as the value for the new variable.
2.3. Click **Create**.
3. Repeat the steps above to add the following new variables:
| New Variable | Value | Description |
| ---------------- | --------- | --------------------------------------- |
| `--input-border` | `#CED4DA` | The border for the Inputs UI components |
| `--label-color` | `#004284` | The color for the labels |
The newly added variables appear under a new category in the **Colors** section of the **STYLES** pane.
## Adding Custom Typography
Adding custom typography allows you to change various font-related styles.
1. Select the **+** button next to **Typography**.
2. Enter `Custom typographies` as a category name and `--text-typography` as a name for the new variable, then set the following properties:
2.1. Select the `Verdana` font family.
2.2. Set the font weight to `400`.
2.3. Set the font size to `14px`.
2.4. Set the line height to `24px`.
## Creating Custom UI Components
Custom components in ThemeBuilder allow you to enrich your set of available UI components. They are based on pure HTML and can be styled using the out-of-the-box features and capabilities of ThemeBuilder.
To create a custom UI component for this tutorial:
1. Click the **+ Add Component** button.
2. Enter `My Form` in the **Name** field as a name and `Forms` in the **Category** field, and then select **Add Component**.
3. Enable the advanced mode by clicking the **Advanced Edit** tab on the top of the screen.
4. Click **My Form** to open the component for editing.
5. Click **\ Add HTML** to open the HTML editor and paste the following code:
```html
```
6. Select **Save & Close** from the drop-down button in the top-right corner.
7. Select the **My Form** frame on the screen to access the properties of the component.
## Using Advanced Customization
Next, you will change the default styles of the previously created UI components to meet our requirements.
### Editing the Button Properties
1. Change the typography of the **button** component part:
1.1. In the **COMPONENT PARTS** pane on the right, select the **button** part.
The **COMPONENT PARTS** pane represents the DOM tree and informs you about the structure of the component.
2.3. In the **PROPERTIES** pane on the right, locate the **Text** property.
2.4. From the drop-down menu, select `--text-typography`—the custom typography that you added in [the previous part of this tutorial](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-blank#adding-custom-typography).
2. Change the border of the **button** component part:
3.1. In the **PROPERTIES** pane, locate the **Border** property.
3.2. Enter `2` as a value for the border width.
3.3. To change the border color, select `--button-border` from the border color drop-down list on the right. You added this color [earlier in this tutorial](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-blank#creating-custom-theme-variables).
### Editing the Input Properties
Next, you will customize the style of the **input** component part:
1. In the **COMPONENT PARTS** pane on the right, select **input** part.
2. In the **PROPERTIES** pane on the right, locate the **Border** property:
2.1. Enter `2px` as the border width value.
2.2. To change the border color, select `--input-border` from the border color drop-down list on the right. You added this color [earlier in this tutorial](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-blank#creating-custom-theme-variables).
## (Optional) Add Kendo UI Theme
If you're building complex applications, it's easier to use an existing UI library to speed up the development process. If that is the case, you can easily include the Telerik and Kendo UI components library in your project.
> Once you add the Kendo UI theme to a project, you cannot remove it later.
To add a Kendo UI theme to your project:
1. Open the project menu by clicking the drop-down button next to the project name.
2. Click on the **Add Kendo UI** option
3. In the **Add Kendo UI** dialog, choose the **Bootstrap** theme. Bootstrap is one of the five themes that you can add to your project.
4. Click on the **Add Kendo UI** button to add the **Bootstrap** theme to your project.
> For a Getting Started tutorial with the Telerik and Kendo UI components, see [First Steps with ThemeBuilder using Telerik and Kendo UI](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-kendo).
## Exporting Your Theme
When you are done styling your custom UI components, you can export the theme that you created by clicking **Export** in the top right corner.
The exported file is a ZIP archive that contains:
* An NPM package—You can use it in version control so that your styles are versioned.
* A minified compiled CSS—You can directly reference these styles in your application.
* SASS files—You can add them to the build of your project to style the components.
* Custom components' HTML files—Use them as a reference in your application.
## Next Steps
* [First steps with ThemeBuilder using Telerik and Kendo UI](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-kendo)
* [Generating custom Kendo theme with AI](https://www.telerik.com/themebuilder/documentation/working-with-kendo/creating-themes-with-ai)
* [Create a new ThemeBuilder project](https://www.telerik.com/themebuilder/documentation/basic-project-operations/creating-new-projects)
* [Exploring the Component Properties](https://www.telerik.com/themebuilder/documentation/building-visual-styles/component-properties)
* [Using the Exported ThemeBuilder Package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package)
* [Keyboard Shortcuts in ThemeBuilder](https://www.telerik.com/themebuilder/documentation/knowledge-base/keyboard-shortcuts)
* [From Design to Development in 7 Steps With ThemeBuilder (Blog Post)](https://www.telerik.com/blogs/design-development-7-steps-themebuilder)
After creating the project, you will see the ThemeBuilder workspace:
* The UI components, when added, are in the center of the screen. These are live components—any change to their styles is immediately rendered on the screen.
* The variables are in the **STYLES** pane on the left-hand side of the screen. These variables let you reuse colors, metrics, and typographies, allowing you to scale any changes in your component styles.
## (Optional) Activating Your Free Trial
This tutorial demonstrates various features that require the ThemeBuilder subscription or a free trial license. If you already have access to the paid features, continue to the [Customizing Theme Variables](https://www.telerik.com/themebuilder/documentation/get-started/first-steps-blank#customizing-theme-variables) section.
To activate your free trial:
1. Locate and click the **Start Trial** banner in the toolbar or one of the star icons in your ThemeBuilder project, for example:
* Click the banner on the top of the ThemeBuilder screen.
* Click the star icon near **Typographies** and **Colors** on the left of the screen.
2. In the new window that opens, click **Start a Trial**. Then accept the license agreement.
## Creating Variables
Adding new variables gives you endless possibilities to style the UI components as you like or as required by the application design.
To create the custom variables for this tutorial:
1. Navigate to the **STYLES** pane and click the **+** button next to the **Color** section.
2. In the **ADD COLOR** editor:
2.1. Enter `Custom variables` as a category name and `--button-border` as the name of the new variable.
2.2. Enter `#DBE3ED` as the value for the new variable.
2.3. Click **Create**.
3. Repeat the steps above to add the following new variables:
| New Variable | Value | Description |
| ---------------- | --------- | --------------------------------------- |
| `--input-border` | `#CED4DA` | The border for the Inputs UI components |
| `--label-color` | `#004284` | The color for the labels |
The newly added variables appear under a new category in the **Colors** section of the **STYLES** pane.
## Adding Custom Typography
Adding custom typography allows you to change various font-related styles.
1. Select the **+** button next to **Typography**.
2. Enter `Custom typographies` as a category name and `--text-typography` as a name for the new variable, then set the following properties:
2.1. Select the `Verdana` font family.
2.2. Set the font weight to `400`.
2.3. Set the font size to `14px`.
2.4. Set the line height to `24px`.
## Creating Custom UI Components
Custom components in ThemeBuilder allow you to enrich your set of available UI components. They are based on pure HTML and can be styled using the out-of-the-box features and capabilities of ThemeBuilder.
To create a custom UI component for this tutorial:
1. Click the **+ Add Component** button.
2. Enter `My Form` in the **Name** field as a name and `Forms` in the **Category** field, and then select **Add Component**.
3. Enable the advanced mode by clicking the **Advanced Edit** tab on the top of the screen.
4. Click **My Form** to open the component for editing.
5. Click **\ Add HTML** to open the HTML editor and paste the following code:
```html