---
title: Overview
order: 1
layout: page
---

[[components.overview]]
= Overview

Vaadin provides a comprehensive set of user interface components and allows you
to define custom components.

The component hierarchy of Vaadin is presented in the next four diagrams:

* <<figure.uicomponents>>
illustrates the inheritance
hierarchy of the UI component classes and interfaces not bound directly to
business objects.

* <<figure.uifields>>
presents fields bound to single values

* <<figure.uiselects>>
presents components that show a list of data and allow selection

* <<figure.uicontainers>>
layouts and other component containers

Interfaces are displayed
with a dotted outline, abstract classes in gray, and regular classes in blue.
////
TODO outdated information. Uncomment when fixed.
 An annotated
version of the diagram is featured in the __Vaadin Cheat Sheet__.
////


[[figure.uicomponents]]
.Basic Components
image::img/component-class-hierarchy.png[width=100%, scaledwidth=100%]

[[figure.uifields]]
.Field Components
image::img/field-class-hierarchy.png[width=100%, scaledwidth=100%]

[[figure.uiselects]]
.Selection Components
image::img/selects-class-hierarchy.png[width=100%, scaledwidth=100%]

[[figure.uicontainers]]
.Layouts and Component Containers
image::img/component-container-class-hierarchy.png[width=100%, scaledwidth=100%]


((("[classname]#Component#")))
The [classname]#Component# is interface implemented by all components.
((("[classname]#AbstractComponent#")))
In practice, all components extend the [classname]#AbstractComponent#
abstract class.

((("[classname]#AbstractField#")))
((("[classname]#AbstractComponentContainer#")))
((("[classname]#AbstractListing#")))
There are three more specific types of components.

Field Components:: allow user to edit a value in the UI. All extend [classname]#AbstractField#. Field components are described in detail in <<components-fields#components.fields,"Field Components">>.

Selection Component:: show a list of data that the user can select from. All extend [classname]#AbstractListing#. Selection components are described in detail in
<<components-selection#components.selection,"Selection Components">>.

Layouts and Component Containers:: Components that can contain other components. All layouts and containers implement the [interfacename]#HasComponents# interface. Layout components are described in detail in
<<../layout/layout-overview#layout.overview,"Managing
Layout">>.

((("Sampler")))
((("JavaDoc")))
You can browse the built-in UI components of Vaadin library in the Sampler
application of the Vaadin Demo. The Sampler shows a description, JavaDoc
documentation, and a code samples for each of the components.

In addition to the built-in components, many components are available as
add-ons, either from the Vaadin Directory or from independent sources. Both
commercial and free components exist. The installation of add-ons is described
in <<../addons/addons-overview#addons.overview,"Using
Vaadin Add-ons">>.

////
TODO outdated information. Uncomment when fixed.
[NOTE]
.Vaadin Cheat Sheet and Refcard
====
<<figure.uicomponents>> is included in the Vaadin Cheat Sheet that illustrates
the basic relationship hierarchy of the user interface components and data
binding classes and interfaces. You can download it at http://vaadin.com/book.

The diagram is also included in the six-page DZone Refcard, which you can find
at https://vaadin.com/refcard.

====
////