UI Component Libraries

This section documents the current Vaadin release line — Vaadin 24 LTS / 25.x, Java 17+, Spring Boot 3 / Jakarta EE 10 — as published at the official Vaadin documentation, which is the reference these pages are written and verified against. No specific patch version is pinned. Flow (server-side Java) is the authoring style used throughout, with Hilla / React shown where it differs; Vaadin 7 and the pre-Flow architecture appear only as migration contrast.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Vaadin ships major releases roughly twice a year and its ecosystem iterates.

This section’s bibliography lists the reference material consulted while preparing these pages.

Unlike most framework references, this page starts from a component library rather than shopping for one: Vaadin ships a large set of UI components, so the question is usually "what does the built-in set not cover?" rather than "which library do I install?". This page lists the built-in components, the open-source add-ons worth knowing, how to reuse Vaadin’s components outside a Vaadin backend, and — last, without examples — the commercial components and Kits. It covers popular options only, free and open-source first. the official component catalogue and the Vaadin Directory are the references it follows.

How to choose

  • Licence first. The framework core — Flow, Hilla, routing, Binder, and 40+ components — is Apache-2.0 and free for commercial use. A distinct set needs a paid subscription: the Pro components (Charts, Grid Pro, CRUD, Dashboard, Map, and more), TestBench, and most Acceleration Kits. Confirm which side of that line a component sits on before you depend on it — Pricing.

  • Do you even need an add-on? The built-in set covers almost every business UI. Reach for the Directory only for a genuine gap (a chart type Vaadin Charts does not have, a file-upload variant, a terminal widget).

  • Flow or Hilla. In Flow you use the Java component classes (com.vaadin.flow.component.*); in a Hilla / React view you use @vaadin/react-components. Both render the same underlying Web Components — see Hilla and React Views.

  • Add-on health. On a Directory listing, check the supported Vaadin versions badge, the last release date, and the licence before adding it. An add-on that ships client-side resources must be compatible with the current frontend build.

  • Accessibility. Vaadin’s own components implement WAI-ARIA roles, keyboard navigation, and focus management; verify any third-party add-on does the same — cross-link Web Accessibility.

  • Styling model. Lumo/Aura design tokens plus theme and component variants and utility classes, versus custom theme CSS reaching into the shadow DOM with ::part() — the full treatment is in Theming and Styling.

Styling options

Vaadin components are styled through a theme, not per-component stylesheets. In brief (the full page is Theming and Styling):

  • A theme folder under src/main/frontend/themes/<name>/ with styles.css and theme.json, activated with @Theme("<name>") on the application shell.

  • Lumo (the default) and Aura expose their design decisions as CSS custom properties — --lumo-primary-color, --lumo-font-size-m, --lumo-border-radius-m — and a dark variant (@Theme(themeClass = Lumo.class, variant = Lumo.DARK)). Lumo.

  • Theme and component variants switch a component’s look without CSS: button.addThemeVariants(ButtonVariant.LUMO_PRIMARY), grid.addThemeVariants(GridVariant.LUMO_COMPACT).

  • Utility classes — LumoUtility.Margin.MEDIUM, LumoUtility.Display.FLEX — and, if you add it, Tailwind utility classes. Cross-link Tailwind Reference and, for preprocessing, Sass Reference.

  • To restyle a component’s internals, target its documented parts and state attributes from the theme stylesheet: vaadin-button::part(label), vaadin-text-field[invalid]. Styling components.

Using a component: Flow and Hilla

The same component, both ways. In Flow it is a Java object:

<!-- pom.xml: the open-source core, via the Vaadin BOM -->
<dependency>
  <groupId>com.vaadin</groupId>
  <artifactId>vaadin-core</artifactId>
</dependency>
Grid<Person> grid = new Grid<>(Person.class);
grid.setColumns("firstName", "lastName", "email");
grid.setItems(personService.findAll());

Button add = new Button("Add", VaadinIcon.PLUS.create(),
        e -> Notification.show("New person"));
add.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

add(add, grid);

In a Hilla / React view it is a component from @vaadin/react-components:

npm i @vaadin/react-components
import { Grid } from '@vaadin/react-components/Grid.js';
import { GridColumn } from '@vaadin/react-components/GridColumn.js';
import { Button } from '@vaadin/react-components/Button.js';

export default function PeopleView() {
  return (
    <>
      <Button theme="primary" onClick={() => Notification.show('New person')}>Add</Button>
      <Grid items={people}>
        <GridColumn path="firstName" />
        <GridColumn path="lastName" />
        <GridColumn path="email" />
      </Grid>
    </>
  );
}

Both are documented per component at Components, which shows the Flow and React (and Lit) API side by side for each one.

Component libraries — free and open-source

Vaadin core components (Apache-2.0)

The built-in set — 40+ components covering forms, data, navigation, layout, and feedback, all Apache-2.0 and free for production use. Highlights:

  • Data entry — TextField, TextArea, EmailField, PasswordField, NumberField, IntegerField, Checkbox, CheckboxGroup, RadioButtonGroup, Select, ComboBox, MultiSelectComboBox, ListBox, DatePicker, TimePicker, DateTimePicker, Upload. See Input Components.

  • Data display — Grid, TreeGrid, VirtualList. See The Grid Component.

  • Layout — VerticalLayout, HorizontalLayout, FlexLayout, FormLayout, SplitLayout, AppLayout, Scroller. See Layouts.

  • Navigation and interaction — Button, Anchor, MenuBar, ContextMenu, Tabs, TabSheet, Accordion, Details, SideNav. See Interaction and Overlays.

  • Feedback and overlays — Dialog, Notification, Popover, Tooltip, ProgressBar, Avatar, Badge, Card (ConfirmDialog is a commercial component — see below).

FormLayout form = new FormLayout();
TextField first = new TextField("First name");
TextField last = new TextField("Last name");
EmailField email = new EmailField("Email");
form.add(first, last, email);
form.setResponsiveSteps(
        new FormLayout.ResponsiveStep("0", 1),
        new FormLayout.ResponsiveStep("30em", 2));

Add the whole set with the vaadin-core artifact (Apache-2.0) or vaadin (which also pulls the commercial components — free in development, licence-checked at production build time). The full list, with a live example and the Flow/React/Lit API for each, is at Components.

Vaadin Web Components, standalone (Apache-2.0)

Every Vaadin component is a framework-agnostic custom element published on npm under @vaadin/. You can use them with *no Vaadin backend at all — in a plain React, Angular, Vue, Lit, or vanilla project — though you then lose the server-side data binding and the Binder / Grid DataProvider integration.

npm i @vaadin/button @vaadin/grid @vaadin/text-field
<script type="module">
  import '@vaadin/button';
  import '@vaadin/grid';
  import '@vaadin/grid/vaadin-grid-column.js';
</script>

<vaadin-button theme="primary">Save</vaadin-button>
<vaadin-grid id="grid">
  <vaadin-grid-column path="name"></vaadin-grid-column>
</vaadin-grid>
<script>
  document.querySelector('#grid').items = [{ name: 'Ada' }, { name: 'Grace' }];
</script>

Source and per-component docs: github.com/vaadin/web-components. For the React wrappers used in Hilla, see Hilla and React Views.

Flow-Viritin (Apache-2.0)

Flow-Viritin (in.virit:viritin) is a community toolbox for Flow: fluent-API wrappers for the core components, a VGrid with typed columns and record support, form helpers (FormBinder, BeanValidationForm), an UploadFileHandler / DynamicFileDownloader, browser-API helpers (cookies, storage, geolocation), and layout helpers (BorderLayout, MainLayout). Version 2.x targets Vaadin 24; 3.6.0+ targets Vaadin 25.2+.

<dependency>
  <groupId>in.virit</groupId>
  <artifactId>viritin</artifactId>
  <version>2.10.0</version>
</dependency>
import org.vaadin.firitin.components.button.VButton;
import org.vaadin.firitin.components.orderedlayout.VVerticalLayout;

add(new VVerticalLayout()
        .withSpacing(true)
        .withComponent(new VButton("Save").withThemeVariants(ButtonVariant.LUMO_PRIMARY)
                .onClick(e -> save())));

SO Charts (Apache-2.0)

SO Charts (org.vaadin.addons.so:so-charts) wraps the Apache-ECharts JavaScript library as a Flow component — an open-source alternative to the commercial Vaadin Charts for line, bar, pie, scatter, gauge, tree, and many other chart types.

<dependency>
  <groupId>org.vaadin.addons.so</groupId>
  <artifactId>so-charts</artifactId>
  <version>6.0.2</version>
</dependency>
SOChart chart = new SOChart();
chart.setSize("600px", "400px");

CategoryData labels = new CategoryData("Mon", "Tue", "Wed", "Thu", "Fri");
Data values = new Data(120, 200, 150, 80, 170);
chart.add(new BarChart(labels, values));

add(chart);

ApexCharts for Flow (Apache-2.0)

apexcharts-flow (com.github.appreciated:apexcharts, from the vaadin-addons repository) wraps ApexCharts.js for Flow — another free charting option, strong on animated line and area charts.

<dependency>
  <groupId>com.github.appreciated</groupId>
  <artifactId>apexcharts</artifactId>
  <version>24.24.0</version>
</dependency>
ApexCharts chart = ApexChartsBuilder.get()
        .withChart(ChartBuilder.get().withType(Type.LINE).build())
        .withSeries(new Series<>("Sales", 30, 40, 35, 50, 49, 60))
        .withXaxis(XAxisBuilder.get()
                .withCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun").build())
        .build();
add(chart);

For Chart.js specifically, community wrappers such as f0rce/chartjs exist in the Directory; check the listing’s Vaadin-version badge and licence before adopting one.

Flowing Code add-ons (Apache-2.0)

Flowing Code publishes a family of open-source Flow add-ons — GridExporter (Excel / PDF / CSV / DOCX export for Grid), GridHelper, EnhancedDialog, XTerm Console, GoogleMaps, FontAwesomeIron, and more — each on the Directory with its own Maven coordinates.

<dependency>
  <groupId>com.flowingcode.vaadin.addons</groupId>
  <artifactId>grid-exporter-addon</artifactId>
  <version>2.4.2</version>
</dependency>
GridExporter<Person> exporter = GridExporter.createFor(grid);
exporter.setFileName("people");
Anchor download = new Anchor(exporter.getExcelStreamResource(), "");
download.getElement().setAttribute("download", true);
download.add(new Button("Export to Excel"));
add(download);

The Vaadin Directory itself

vaadin.com/directory is the add-on marketplace. To use any add-on, add the vaadin-addons repository and the dependency the listing gives you:

<repositories>
  <repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
  </repository>
</repositories>

Read a listing before depending on it: the supported Vaadin versions badge, the last release date, the licence (most are Apache-2.0, some are commercial), and the rating. Add-ons that ship frontend resources are picked up automatically by the Vaadin build.

React component libraries in Hilla views

A Hilla view is a normal React component, so the React UI libraries in the React Reference — MUI, Mantine, Chakra UI, Radix UI, shadcn/ui — work exactly as in any React app, and can be mixed with @vaadin/react-components in the same view (for example a MUI DataGrid next to a Vaadin DatePicker). See that page rather than repeating it here, and Hilla and React Views for the Hilla side.

A "which one?" decision aid

If you need…​ Reach for

A UI written in Java

Vaadin core (Flow). Add a Directory add-on only for a real gap.

A UI written in React / TypeScript

@vaadin/react-components (Hilla), plus any React library from Styling and UI Libraries.

Charts without a paid subscription

SO Charts (ECharts) or ApexCharts for Flow — both Apache-2.0 — instead of the commercial Vaadin Charts.

A rich data grid with inline editing, an out-of-the-box CRUD, a spreadsheet, a map, or a dashboard

The Vaadin Pro / Prime components (commercial) — Grid Pro, CRUD, Spreadsheet, Map, Dashboard.

Excel / PDF export from a Grid, an enhanced dialog, a terminal widget, fluent component APIs

Flowing Code add-ons / Flow-Viritin (Apache-2.0), from the Directory.

Vaadin’s components without a Vaadin backend

The standalone @vaadin/ Web Components* on npm.

Commercial suites — paid / licensed

Licensed products; listed last, without examples. They compile and run in development mode without a licence, but a production build fails without a valid subscription — see Configuration and Dev Tools and Pricing.

  • Vaadin Pro / Prime components — Charts, Grid Pro (inline editing), CRUD, Dashboard, Map, Spreadsheet, Rich Text Editor, Confirm Dialog, Cookie Consent. Charts is based on Highcharts and carries its own licensing terms.

  • TestBench — the end-to-end and browserless UI testing tool. See Testing.

  • Acceleration Kits — Tools: the SSO Kit, Kubernetes Kit, Azure Cloud Kit, Observability Kit, AppSec Kit, and Multiplatform Runtime. Not every Kit is commercial — the Collaboration Kit is Apache-2.0.

  • Vaadin Designer — a visual UI builder; being superseded by Vaadin Copilot, which is free and covered in Configuration and Dev Tools.

  • Third-party suites in Hilla / React views — Kendo UI for React, AG Grid Enterprise, and MUI X Pro are commercial React products usable in a Hilla view; see Styling and UI Libraries.

Accessibility

Vaadin’s built-in components ship WAI-ARIA roles, keyboard navigation, and focus management, and the Lumo and Aura themes meet WCAG AA contrast by default. You still own the labels, error text, and reduced-motion choices:

TextField email = new TextField("Email address");   // renders a real <label>
email.setHelperText("We only use this to send receipts.");
email.setErrorMessage("Enter a valid email address.");
email.setRequiredIndicatorVisible(true);
email.getElement().setAttribute("autocomplete", "email");

Check pages with axe or Lighthouse during development, and assert accessibility in end-to-end tests — TestBench exposes accessibility checks. Cross-link Web Accessibility for conformance levels and validation tools.

See also