> Markdown version of [Using Vaadin Components](https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup). Section index: [llms.txt](https://vaadin.com/docs/v10/flow/llms.txt)

# Using Vaadin Components

There is a set of pre-built server-side components with Java API for [Vaadin Web Components](https://vaadin.com/components/browse), such as `Button`, `TextField` and so on. Those components are part of the Vaadin platform, and are included as dependencies in the platform together with Flow.

The platform has the following components with Java API available:

- `Button` - [Demos](https://vaadin.com/components/vaadin-button/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/button/Button.html), [sources and issue tracking](https://github.com/vaadin/vaadin-button-flow)

- `CheckBox` - [Demos](https://vaadin.com/components/vaadin-checkbox/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/checkbox/Checkbox.html), [sources and issue tracking](https://github.com/vaadin/vaadin-checkbox-flow)

- `ComboBox` - [Demos](https://vaadin.com/components/vaadin-combo-box/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/combobox/ComboBox.html), [sources and issue tracking](https://github.com/vaadin/vaadin-combo-box-flow)

- `DatePicker` - [Demos](https://vaadin.com/components/vaadin-date-picker/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/datepicker/DatePicker.html), [sources and issue tracking](https://github.com/vaadin/vaadin-date-picker-flow)

- `Dialog` - [Demos](https://vaadin.com/components/vaadin-dialog/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/dialog/Dialog.html), [sources and issue tracking](https://github.com/vaadin/vaadin-dialog-flow)

- `FormLayout` - [Demos](https://vaadin.com/components/vaadin-form-layout/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/formlayout/FormLayout.html), [sources and issue tracking](https://github.com/vaadin/vaadin-form-layout-flow)

- `Grid` - [Demos](https://vaadin.com/components/vaadin-grid/java-examples), [Documentation](https://vaadin.com/docs/v10/flow/components/tutorial-flow-grid.md), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/grid/Grid.html), [sources and issue tracking](https://github.com/vaadin/vaadin-grid-flow)

- `Icons` - [Demos](https://vaadin.com/components/vaadin-icons/java-examples), [Documentation](https://vaadin.com/docs/v10/flow/components/tutorial-flow-icon.md), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/icon/package-summary.html), [sources and issue tracking](https://github.com/vaadin/vaadin-icons-flow)

- `IronList` - [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/icon/package-summary.html), [examples, sources and issue tracking](https://github.com/vaadin/vaadin-iron-list-flow)

- `ListBox` - [Demos](https://vaadin.com/components/vaadin-list-box/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/listbox/ListBox.html), [sources and issue tracking](https://github.com/vaadin/vaadin-list-box-flow)

- `Notification` - [Demos](https://vaadin.com/components/vaadin-notification/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/notification/Notification.html), [sources and issue tracking](https://github.com/vaadin/vaadin-notification-flow)

- `HorizontalLayout` & `VerticalLayout` & `FlexLayout` - [Demos](https://vaadin.com/components/vaadin-ordered-layout/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/orderedlayout/package-summary.html), [sources and issue tracking](https://github.com/vaadin/vaadin-ordered-layout-flow)

- `ProgressBar` - [Demos](https://vaadin.com/components/vaadin-progress-bar/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/progressbar/ProgressBar.html), [sources and issue tracking](https://github.com/vaadin/vaadin-progress-bar-flow)

- `RadioButton` - [Demos](https://vaadin.com/components/vaadin-radio-button/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/radiobutton/RadioButtonGroup.html), [sources and issue tracking](https://github.com/vaadin/vaadin-radio-button-flow)

- `SplitLayout` - [Demos](https://vaadin.com/components/vaadin-split-layout/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/splitlayout/SplitLayout.html), [sources and issue tracking](https://github.com/vaadin/vaadin-split-layout-flow)

- `Tabs` - [Demos](https://vaadin.com/components/vaadin-tabs/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/tabs/Tabs.html), [sources and issue tracking](https://github.com/vaadin/vaadin-tabs-flow)

- `TextField` & `TextArea` & `PasswordField` - [Demos](https://vaadin.com/components/vaadin-text-field/java-examples), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/textfield/package-summary.html), [sources and issue tracking](https://github.com/vaadin/vaadin-text-field-flow)

- `Upload` - [Demos](https://vaadin.com/components/vaadin-upload/java-examples), [Documentation](https://vaadin.com/docs/v10/flow/components/tutorial-flow-upload.md), [Javadoc](https://vaadin.com/api/platform/com/vaadin/flow/component/upload/Upload.html), [sources and issue tracking](https://github.com/vaadin/vaadin-upload-flow)

When you use the Vaadin 10 platform dependency, you automatically get **ALL** available components. Using the platform dependency guarantees that you’ll get versions of Flow and the components that are compatible together.

```xml
<repositories>
    <repository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </repository>
</repositories>

<dependencies>
    <!-- other dependencies -->
    <!-- component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin</artifactId>
        <version>${vaadin.platform.version}</version>
    </dependency>
</dependencies>
```

> **Note:** `vaadin.platform` releases regularly and you can check the version number [here](https://github.com/vaadin/platform/releases)

> **Note:** The components are also provided as single dependencies per component. See [the platform pom.xml](https://github.com/vaadin/platform/blob/master/vaadin/pom.xml#L68) for example.

The platform also contains ready made *theming* for the components that help you tweak and tune the look and feel of the components. See the [Using Component Themes](https://vaadin.com/docs/v10/flow/theme/using-component-themes.md) for more info.

For more ready-made Java APIs for Web Components, you should check the [Vaadin Directory.](https://vaadin.com/directory/search?framework=Vaadin%2010)

# <a id="flow-component-package-contents-explained"></a>Flow Component Package Contents Explained

A Flow component package consists of two main sections:

- Java API classes

- Web Components' files (html, js, css etc)

All sections are used by Flow to display the components in web pages correctly. By default, both sections are provided in the same jar.

Web components' files are provided as [webjars](https://github.com/webjars/webjars/) – jar files that contain webcomponents' files, heavily influenced by current Polymer package manager: [bower](https://bower.io/) (not developed or maintained by Vaadin)

Webjars are designed to replace `bower` usage by using `Maven` for the same purposes.

`Flow` is able to resolve requests into webjars' contents (if intended by request), imitating the regular web component’s files.

Although currently enabled by default, webjars do not restrict users from using external web components' files:

- webjar resolving can be turned off

- if no suitable webjar is found, request resolving falls back to configured external web components' locations

> **Note:** Due to current webjar [limitations](https://github.com/webjars/webjars/issues), extra maven configuration (extra repository + bom file declaration) is required.

## <a id="maven-configuration-to-use-only-single-components"></a>Maven configuration to use only single components

If you don’t want to take everything provided by the `com.vaadin:vaadin` dependency, you can also optionally declare single components as dependencies.

The first step is to add the `bom` and the wanted `flow-component` (e.g. `vaadin-button-flow`) package to your project dependencies.

When using Maven you can add a the button component into your `pom.xml` as this:

```xml
<repositories>
    <repository>
        <id>vaadin-prereleases</id>
        <url>https://maven.vaadin.com/vaadin-prereleases</url>
    </repository>
</repositories>

<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>${vaadin.platform.version}</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

<dependencies>
    <!-- other dependencies -->

    <!-- component dependency -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-button-flow</artifactId>
    </dependency>

    <!-- other dependencies -->
</dependencies>
```

## <a id="maven-configuration-to-exclude-webjars"></a>Maven configuration to exclude webjars

If webjar dependencies are not needed, they can be excluded from the project using standard Maven mechanism:

```xml
<!-- No webjars == no bom needed and no extra repo needed, but you have to get webjars' files into the build yourself -->
<dependencies>
    <!-- other dependencies -->

    <!-- the dependency with webjars excluded -->
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-button-flow</artifactId>
        <version>1.0-SNAPSHOT</version>
        <exclusions>
            <exclusion>
                <groupId>org.webjars.bowergithub.vaadin</groupId>
                <artifactId>*</artifactId>
            </exclusion>
        </exclusions>
    </dependency>

    <!-- other dependencies -->
</dependencies>
```