---
title: Overview
position: 1
seo_title: Overview of the Wizard Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  Wizard component, check out its available options in the live demo, and
  customize its appearance as you wish on the fly.
---
## Wizard Overview

The Wizard component is a user interface (UI) element that divides complex processes into sequential, manageable steps. It provides a guided experience, leading users through tasks with clear instructions and progress indicators. This makes the Wizard ideal for tasks like registrations, settings configuration, or data entry.

By structuring information into distinct stages, the Wizard minimizes user overwhelm and enhances focus. This component not only improves the user experience by simplifying complicated tasks but also ensures accuracy and efficiency in data collection and process completion.

### Live Demo

<LiveDemo data='{"links":[{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/wizard/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/wizard/index"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/wizard/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/wizard"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/wizard"}],"demo":"components/wizard/overview"}'></LiveDemo>

### Appearance

Wizards provide built-in styling options that grant visually appealing and flexible rendering experience. 

#### Anatomy

The anatomy of the Wizard summarizes the visual and functional elements of the component. The main elements include a stepper and wizard step that consists of a content area, pager and action buttons.

The next image shows the anatomy of a Wizard and includes the following elements:

<BlueprintImage data='{"description":"","labels":[{"text":"Stepper"},{"text":"Wizard step"},{"text":"Content area"},{"text":"Wizard pager"},{"text":"Wizard buttons"}]}'>![Anatomy and elements of the Telerik and Kendo UI Wizard component including the stepper and the wizard step with its content area, pager and buttons](images/components-wizard-overview-anatomy-v2.png "The Telerik and Kendo UI Wizard component and the elements in its anatomy")</BlueprintImage>

#### Content Position

Depending on the content position, the Telerik and Kendo UI Wizard can be any of the following types:

* Bottom with horizontal stepper
* Right with vertical stepper
* Left with vertical stepper

<BlueprintImage data='{"description":"","labels":[{"text":"Bottom with horizontal stepper"},{"text":"Right with vertical stepper"},{"text":"Left with vertical stepper"}]}'>![The three types of the Telerik and Kendo UI Wizard, based on stepper and wizard step position](images/components-wizard-overview-content-position-v2.png "The Telerik and Kendo UI Wizard provides three positioning options for the stepper and wizard step")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Telerik UI for Blazor Wizard","description":"Find more information about the Telerik UI for Blazor Wizard in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/wizard/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery Wizard","description":"Find more information about the Kendo UI for jQuery Wizard in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/wizard/overview"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue Wizard","description":"Find more information about the Kendo UI for Vue Wizard in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/wizard/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core Wizard","description":"Find more information about the Telerik UI for ASP.NET Core Wizard component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/navigation/wizard/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC Wizard","description":"Find more information about the Telerik UI for ASP.NET MVC Wizard component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/wizard/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>