Vaadin Web Components

Vaadin Web Components is a UI component library hosted on GitHub, providing 61 standards-based custom elements — 54 core components under Apache License 2.0 and 7 pro components under the Vaadin Commercial License and Service Terms — for enterprise business web application interfaces. Maintained by Vaadin for Vaadin 20 and newer, the set ships as individual npm packages under the @vaadin scope, so each element can be installed, versioned, and upgraded independently.

What is Vaadin Web Components?

Vaadin Web Components is an evolving set of web components for business web applications, maintained by Vaadin and documented with live examples at vaadin.com/docs/latest/components. Developers consume it by installing @vaadin-scoped npm packages and placing custom element tags such as vaadin-grid, vaadin-button, or vaadin-date-picker in their markup; the library renders the corresponding interactive UI with built-in behavior and theming. The project targets Vaadin 20 and newer, while individual repositories cover components for older Vaadin versions.

Key features

Vaadin Web Components stands out for its split licensing model — a large Apache-licensed core plus a commercial pro tier — and its per-package npm distribution, which keeps each element independently versioned.

• Standards-based custom elements — Every component is a native web component that runs in any browser supporting the Custom Elements standard, without requiring a specific JavaScript framework.
• 54 core components under Apache License 2.0 — The free tier spans input fields, pickers, layouts, dialogs, and data display, including vaadin-text-field, vaadin-combo-box, vaadin-app-layout, vaadin-tabs, and vaadin-grid.
• 7 pro components under a commercial license — vaadin-charts, vaadin-board, vaadin-dashboard, vaadin-crud, vaadin-grid-pro, vaadin-map, and vaadin-rich-text-editor are available through the Vaadin Pro subscription.
• Per-component npm releases — Each package tracks separate latest and next release lines on the repository's tables, letting teams adopt updates incrementally.
• Documented browser support — Desktop: evergreen Chrome, Firefox, and Chromium-based Edge, plus Safari 17 or newer. Mobile: Chrome for Android 4.4 or newer and Safari for iOS 17 or newer.
• Vaadin platform integration — The components are part of the Vaadin 20+ stack, and start.vaadin.com generates a starter Vaadin app that uses them.

Who is it for?

Vaadin Web Components suits developers building data-heavy business interfaces who want standards-based widgets rather than a framework-bound component set.

• Enterprise application teams — assemble internal admin interfaces, operations dashboards, and record-management screens from ready-made elements like vaadin-grid, vaadin-crud, and vaadin-dashboard.
• Vaadin (Java) developers — teams building on Vaadin 20+ use these web components as their front-end layer and can scaffold a starting project at start.vaadin.com.
• Front-end developers wanting framework-agnostic UI — because the elements follow web standards, they drop into any web stack that renders HTML.
• Teams with advanced visualization needs — the commercial tier adds vaadin-charts, vaadin-map, and vaadin-board for data-heavy products that the Apache-licensed core does not cover.

What can you do with Vaadin Web Components?

The library covers the full range of business application UI — navigation, forms, data display, feedback, and overlays — through its individual elements.

• Admin dashboard builders: combine vaadin-app-layout, vaadin-side-nav, and vaadin-tabs for navigation with vaadin-grid for tabular data and vaadin-charts (pro) for metrics.
• Form creators: compose vaadin-text-field, vaadin-email-field, vaadin-password-field, vaadin-date-picker, vaadin-combo-box, vaadin-checkbox-group, vaadin-radio-group, and vaadin-form-layout into structured entry forms.
• Data-management developers: use vaadin-crud and vaadin-grid-pro for inline editing, vaadin-confirm-dialog for destructive confirmations, and vaadin-upload for file intake.
• UX-heavy app builders: layer vaadin-dialog, vaadin-notification, vaadin-popover, vaadin-tooltip, vaadin-details, and vaadin-accordion for overlays, feedback, and progressive disclosure.

How does Vaadin Web Components work?

Each component is published as its own npm package in the @vaadin scope, and the source repository organizes packages in separate folders, each with its own LICENSE file. To get started, browse the documentation and live examples at vaadin.com/docs/latest/components, generate a starter app at start.vaadin.com, or read the contributing guide at vaadin.com/docs/latest/contributing to modify packages locally.

Pricing

The 54 core components are free under Apache License 2.0. The 7 pro components are licensed under the Vaadin Commercial License and Service Terms and are included with a Vaadin Pro subscription; pricing is published at vaadin.com/pricing.

Alternatives

Shoelace is a framework-agnostic web component library distributed via npm, and Material Web Components is Google's Material Design component set built on the web components standard.

FAQ

Are the Vaadin web components free?

The 54 core components are free under Apache License 2.0. The seven pro components — vaadin-charts, vaadin-board, vaadin-dashboard, vaadin-crud, vaadin-grid-pro, vaadin-map, and vaadin-rich-text-editor — require a paid Vaadin Pro subscription.

Which browsers are supported?

Desktop support covers evergreen Chrome, Firefox, and Chromium-based Edge, plus Safari 17 or newer. Mobile support covers Chrome for Android 4.4 or newer and Safari for iOS 17 or newer. Older Safari versions are not listed as supported.

Where can I get help or report issues?

Help and support questions go to the Vaadin Forum at vaadin.com/forum. The GitHub repository tracks component-specific issues per package, using labels such as vaadin-grid and vaadin-date-picker.

How do I contribute?

Read the contributing guide at vaadin.com/docs/latest/contributing, which explains the development process, how to propose bugfixes and improvements, and how to test changes. The repository also includes a DEVELOPMENT.md for local project setup.

Which Vaadin version does this require?

This project contains components for Vaadin 20 and newer. Components for older Vaadin versions live in individual repositories, which are referenced from the main project table.