third-party-components
Installation
SKILL.md
Integrating Third-Party Components in Vaadin 25
Use the Vaadin MCP tools (search_vaadin_docs, get_component_java_api) to look up the latest documentation whenever uncertain about a specific API detail. Always set vaadin_version to "25" and ui_language to "java".
Choosing Your Integration Path
There are two paths for integrating an npm component into Vaadin Flow. The right choice depends on what the npm package exports.
| Criterion | Web Component Path | React Path |
|---|---|---|
| npm package exports | A custom element (customElements.define()) |
React components (export function/class) |
| Java base class | Component (or AbstractSinglePropertyField) |
ReactAdapterComponent |
| Client-side code needed? | No (unless writing a custom element yourself) | Yes — a thin .tsx adapter file |
| State sync mechanism | Element properties + @Synchronize / @DomEvent |
setState() / getState() / hooks.useState() |
| When to use | The package already ships a web component | The package only ships React components |
If the npm package exports both a web component and a React wrapper, prefer the Web Component path — it avoids the extra .tsx adapter layer.