skills.rest
vaadin
vaadinOFFICIAL
Explore all skills by this author →
Website𝕏@vaadinGitHub

third-party-components

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

11|3|Updated Feb 26, 2026
Search Tags:#adapter#web-components#integrate#react-components#binder#npm-packages#vaadin-25
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill third-party-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: third-party-components
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/third-party-components
Command: npx skills add https://github.com/vaadin/claude-plugin --skill third-party-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers need a clear, repeatable way to wrap and integrate third-party Web Components and React components from npm into Vaadin 25 Flow applications. This integration is complex due to mismatched packaging formats, annotation requirements, and differing state-synchronization models. This Skill guides you through two primary paths and best practices so wrappers work reliably in production.

Core Features & Use Cases

  • Web Component path: create Java wrappers using @Tag, @NpmPackage, and @JsModule with proper property handling, DomEvent mappings, and optional Binder support via AbstractSinglePropertyField.
  • React path: implement a thin ReactAdapterComponent and a TSX ReactAdapterElement to bridge server state and client UI, including stable initialization via setState and binder-friendly updates.
  • Use Cases: wrap npm Web Components or React components for Vaadin 25 apps, enable property synchronization, handle events, and optionally embed Flow components inside React adapters.

Quick Start

Create a minimal wrapper using the Web Component path with @Tag, @NpmPackage, and @JsModule, then validate a simple property binding and a DOM event.

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 npm Web Components into a Vaadin 25 Flow application?▼

Integrating npm Web Components in Vaadin 25 involves creating Java wrappers using @Tag, @NpmPackage, and @JsModule annotations. This approach ensures proper property handling, DOM event mapping, and optional Binder compatibility for reliable production use.

Can I use React components from npm inside a Vaadin 25 Flow application?▼

Yes, you can use React components in Vaadin 25 by implementing a ReactAdapterComponent and a ReactAdapterElement via a TSX file. This adapter pattern bridges server state and client UI while supporting stable initialization and binder-friendly updates.

What is the best way to synchronize component state between the server and client in Vaadin 25?▼

State synchronization in Vaadin 25 is best handled through property descriptors and event listeners for Web Components, or via setState in React adapters. This ensures stable client-side initialization and binder-friendly server-state updates.

How do I make a wrapped Web Component compatible with the Vaadin Binder?▼

To make a Web Component compatible with the Vaadin Binder, extend the AbstractSinglePropertyField class in your Java wrapper. This creates a single-property field that automatically supports state synchronization and validation within the Binder framework.

Does Vaadin 25 support embedding Flow components inside a React adapter?▼

Yes, Vaadin 25 supports embedding Flow components within React adapters using the getContent feature. This allows you to nest server-side Vaadin UI elements directly inside your client-side React components seamlessly.

Why do my wrapped npm components fail to handle DOM events in Vaadin 25?▼

Wrapped npm components fail to handle DOM events in Vaadin 25 when the @DomEvent annotation mapping is missing or incorrect. Properly mapping client-side CustomEvent firing to server-side listeners resolves the synchronization failure.

Related Skills

Explore More Software Engineering Skills→
marcushellbergmarcushellberg
6

third-party-components

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

Community
Advanced
marcushellbergmarcushellberg
6

client-side-views

Build client-side Vaadin 25 views with React or Hilla.

Community
Intermediate
marcushellbergmarcushellberg
6

signals

Manage reactive UI state with Vaadin Flow Signals.

Community
Advanced
vaadinvaadin
11

client-side-views

Build client-side React/Hilla views with file-based routing and type-safe Java endpoints.

Official
Advanced