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

The ListView component is a versatile tool that enables users to view and interact with lists of items in a structured and user-friendly manner. It displays the information stored in each data item in a custom layout by using templates, making it suitable for a wide range of applications. 

### Live Demo

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

### Appearance

The ListView provides a visually appealing and flexible rendering experience. 

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ListView can acquire the following states which you can set by using the following classes:

* A ListView in its normal state appears active, and is usable and clickable.
* `k-disabled`&mdash;The disabled state indicates that a ListView is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, ListViews in their disabled state are usually faded and slightly out of focus.

#### Anatomy

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

<BlueprintImage data='{"description":"","labels":[{"text":"ListView header title (optional)"},{"text":"ListView item"},{"text":"ListView header"},{"text":"ListView content"},{"text":"ListView footer (optional)"}]}'>![Anatomy of the Telerik and Kendo UI ListView component](images/components-listview-overview-anatomy.png "Elements of the Telerik and Kendo UI ListView component anatomy")</BlueprintImage>

### Framework-Specific Documentation

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

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

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

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

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

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

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

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

</Wrap>