---
title: Overview
position: 1
seo_title: Overview of the StackLayout Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  StackLayout component and check out the extensive set of available options in
  its live demo.
---
## StackLayout Overview

The StackLayout component enables you to easily align multiple elements in a stack, either vertically or horizontally. It provides various customization options, allowing you to set up different orientations, alignments, and spacing between elements. You can stack and adjust the alignment of inner elements, and even nest multiple StackLayout components within each other. This flexibility makes it simple to create organized layouts that enhance the user interface and improve the overall design of your application.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/button/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/stacklayout/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/stacklayout/"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/stacklayout/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/stacklayout/overview"}],"demo":"components/stacklayout/overview"}'></LiveDemo>

### Appearance

The StackLayout provides built-in arranging options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI StackLayout, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the StackLayout summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Inner element"},{"text":"Gap"},{"text":"StackLayout container"}]}'>![A Telerik and Kendo UI StackLayout component and its elements including inner element, gap and StackLayout container.](images/components-stacklayout-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI StackLayout component")</BlueprintImage>

#### Orientation

Depending on the orientation of the inner elements, the Telerik and Kendo UI StackLayout can be any of the following types:

* Horizontal
* Vertical

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![The two possible orientation positions of the Telerik and Kendo UI StackLayout component](images/components-stacklayout-overview-orientation.png "The horizontal and vertical orientations of the Telerik and Kendo UI StackLayout")</BlueprintImage>

#### Horizontal Alignment

Depending on the horizontal alignment of the inner elements, the Telerik and Kendo UI StackLayout provides the following arrangement configurations:

* Left 
* Center
* Right
* Stretch

<BlueprintImage data='{"description":"","labels":[{"text":"Left"},{"text":"Center"},{"text":"Right"},{"text":"Stretch"}]}'>![The four possible horizontal alignment options of the Telerik and Kendo UI StackLayout component](images/components-stacklayout-overview-alignment-horizontal.png "The left, center, right and stretch horizontal alignments of the Telerik and Kendo UI GridLayout")</BlueprintImage>

#### Vertical Alignment

Depending on the vertical alignment of the inner elements, the Telerik and Kendo UI StackLayout provides the following arrangement configurations:

* Top
* Center
* Bottom
* Stretch

<BlueprintImage data='{"description":"","labels":[{"text":"Top"},{"text":"Center"},{"text":"Bottom"},{"text":"Stretch"}]}'>![The four possible vertical alignment options of the Telerik and Kendo UI StackLayout component](images/components-stacklayout-overview-alignment-vertical.png "The top, center, bottom and stretch vertical alignments of the Telerik and Kendo UI StackLayout")</BlueprintImage>

<Notification data='{"type":"default","content":"Vertical and horizontal alignment options can be combined in the StackLayout container to achieve any desired positioning of the inner elements."}'>Vertical and horizontal alignment options can be combined in the StackLayout container to achieve any desired positioning of the inner elements.</Notification>

### Nested StackLayout

The Telerik and Kendo UI StackLayout allows you to create more complex layouts by nesting multiple StackLayout components within each other, enabling both horizontal and vertical alignment of inner elements.

<BlueprintImage data='{"description":"","labels":[]}'>![Showing nested Telerik and Kendo UI StackLayout components within each other.](images/components-stacklayout-overview-nested.png "Nesting multiple StackLayouts into a single Telerik and Kendo UI StackLayout")</BlueprintImage>

### Framework-Specific Documentation

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

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

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

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

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

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

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

</Wrap>