# ThemeBuilder Quick Tour

This article takes you through the main ThemeBuilder screens and shows how to perform common operations.

## ThemeBuilder Dashboard

The ThemeBuilder **Dashboard** allows you to [create new projects](https://www.telerik.com/themebuilder/documentation/basic-project-operations/creating-new-projects) and access all your existing projects. Once you create your first project, the **Dashboard** is the first screen that you will see after [logging in](https://www.telerik.com/themebuilder/documentation/basic-project-operations/login).

## ThemeBuilder Toolbar

The ThemeBuilder toolbar provides quick access to several commands. The toolbar is available only when you open an existing project or [create a new one](https://www.telerik.com/themebuilder/documentation/basic-project-operations/creating-new-projects).

### Toolbar Elements

The toolbar includes the following buttons and elements:

* **Home**—Go back to the ThemeBuilder dashboard.
* **Document status**—Indicates if all changes are saved.
* **Project name and menu**—The name of the opened project and a drop-down menu with the version of the Telerik and Kendo UI themes and several project operations: **Share**, **Rename**, **Export Metadata**, **Import Metadata**, and **Delete**.
* **Active collaborators icons**—These icons display the initials of other collaborators who currently work on this project.
* **Project Settings**—Manage project settings, such as asset types, dark theme settings, and custom fonts that you can use when customizing the components.
* **Share**—Share the project with others or remove someone from the access list.
* **Help**—Provides quick access to the documentation and allows you to enable the onboarding hints.
* **Account**—Shows the currently logged in user and the account settings.
* **Export All**—Export all CSS and SASS changes that have been applied to the components.
* **Export Selected**—Export the CSS and SASS changes only for the components that are visible on the components canvas.

  ![The ThemeBuilder toolbar](https://www.telerik.com/themebuilder/documentation/assets/be039ec96ac79b9232f666b8727c46fa/web-app-toolbar.png)

## Project Main Screen

The Project Main Screen appears when you open an existing project or create a new one. This screen has several elements:

1. The [ThemeBuilder toolbar](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#themebuilder-toolbar).

2. The **STYLES** pane—allows you to [customize the visual theme](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables#editing-the-theme-styles) by:

   2.1. Selecting a color swatch.

   2.2. Adding a new Sass or CSS variable.

   2.3. Editing the values of the variables.

   2.4. Using component-specific variables in the **THEME STYLES** pane in advanced customization mode.

3. The **Advanced Edit** switch—allows you to enable the [advanced customization mode](https://www.telerik.com/themebuilder/documentation/building-visual-styles/apply-advanced-customizations), which allows you to drill-down to specific components and style them individually. To use the advanced editing functionalities, you need a [ThemeBuilder license](https://www.telerik.com/themebuilder/documentation/introduction#themebuilder-pro-free-trial).

4. The Project Settings button, which opens the **Project Settings** dialog.

5. Add a new custom component, based on HTML.

6. Import custom components, as HTML, from Figma.

7. The **Undo** and **Redo** buttons.

8. The Select Components button—allows you to reduce the number of UI components shown in the **Live Preview** pane.

9. The **Live Preview**—shows how the theme changes when you modify its variables.

   ![The ThemeBuilder Project Main Screen](https://www.telerik.com/themebuilder/documentation/assets/7cc401eca250fea10b81fb472b0bb9a9/themebuilder-project-main-screen.png)

## Advanced Edit View

In the **Advanced Edit** view, you can select individual components—this opens the [Component Canvas](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#component-canvas) and allows you to drill-down to the component states level where you can start [applying advanced customization](https://www.telerik.com/themebuilder/documentation/building-visual-styles/apply-advanced-customizations).

## Component Canvas

Each UI component has a dedicated component canvas, which shows all states of the selected component. Once you drill-down to the component states level, ThemeBuilder reveals the following elements:

1. The Component Canvas— serves as a live preview for the component styles.

2. The component-level **COMPONENT PARTS** pane—shows the parts of the component that you have selected on the canvas.

3. The **INTERACTIVE STATES** tree—selects a styling template for each supported component state.

4. The **PROPERTIES** pane—displays the property editors for the component part that you selected in the **COMPONENT PARTS** tree.

   > tip You can switch from **PROPERTIES** to the **STYLES EDITOR** pane if you prefer declarative editing in a text editor.

![Component canvas](https://www.telerik.com/themebuilder/documentation/assets/095e824b08c4fa07f5610482f48cbbb0/themebuilder-component-canvas.png)

## Next Steps

* [Using the Exported ThemeBuilder Package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package)
* [Create a new ThemeBuilder project](https://www.telerik.com/themebuilder/documentation/basic-project-operations/creating-new-projects)
* [Applying Advanced Customizations](https://www.telerik.com/themebuilder/documentation/building-visual-styles/apply-advanced-customizations)
* [From Design to Development in 7 Steps With ThemeBuilder (Blog Post)](https://www.telerik.com/blogs/design-development-7-steps-themebuilder)