skills.rest
marcushellberg
marcushellbergCOMMUNITY
Explore all skills by this author →
GitHub

third-party-components

Integrate third-party Web Components and React components into Vaadin 25 Flow applications.

6|1|Updated Feb 24, 2026
Search Tags:#integration#react#npm#third-party#bindings#web-components#vaadin
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill third-party-components-marcushellberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: third-party-components
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/third-party-components
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill third-party-components-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Integrate third-party Web Components and React components from npm into Vaadin 25 Flow applications, enabling seamless usage, event mapping, and state synchronization.

Core Features & Use Cases

  • Web Component wrappers: map custom elements with Vaadin bindings and @Tag/@NpmPackage/@JsModule mappings.
  • React adapter path: build a thin ReactAdapterComponent and a minimal .tsx adapter to bridge React components to Vaadin.
  • Event and state synchronization: use @DomEvent, @Synchronize, PropertyDescriptor, and Binder-compatible fields where appropriate.
  • Use Case: wrap an npm web component like a date picker or a React component wrapper and expose it as a Vaadin component.

Quick Start

Implement the integration by selecting the Web Component path or React path and wiring the Java wrapper to the corresponding JS module

Frequently Asked Questions about third-party-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate third-party web components into a Vaadin 25 Flow application?▼

To integrate third-party web components into Vaadin 25, you wrap custom elements by mapping them with Vaadin bindings using @Tag, @NpmPackage, and @JsModule annotations. This bridges the Java wrapper to the corresponding npm JavaScript module.

Can I use React components in Vaadin 25?▼

Yes, you can use React components in Vaadin 25 by building a thin ReactAdapterComponent and a minimal .tsx adapter. This React adapter path bridges the React component to Vaadin Flow for seamless usage.

What is the best way to synchronize state and events between web components and Vaadin Flow?▼

The best way to synchronize state and events is using @DomEvent, @Synchronize, PropertyDescriptor, and Binder-compatible fields. This ensures correct event mapping and state synchronization between the front-end components and Vaadin.

When should I choose the React adapter path over wrapping web components for npm integration?▼

Choose the React adapter path when integrating React components specifically, requiring a ReactAdapterComponent and .tsx file. Choose the web component path to map custom elements directly using @Tag and @JsModule annotations for standard npm packages.

Do I need specific annotations to map npm packages in Vaadin?▼

Yes, mapping npm packages requires correct annotation usage. You must implement @Tag, @NpmPackage, and @JsModule mappings to enforce proper integration and wire the Java wrapper to the JavaScript module.

Related Skills

Explore More Software Engineering Skills→
vaadinvaadin
11

third-party-components

Wrap npm Web Components and React components for Vaadin 25 Flow applications.

Official
Advanced
vaadinvaadin
11

signals

Manage reactive UI state and propagate updates across Vaadin Flow components.

Official
Intermediate
vaadinvaadin
11

forms-and-validation

Bind Vaadin 25 UI fields to Java beans with Binder validation.

Official
Advanced
jidohyunjidohyun
17

webf-native-ui-dev

Wrap Flutter widgets as WebF custom elements for web apps.

Community
Intermediate