third-party-components
OfficialWrap Web Components and React for Vaadin 25.
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: third-party-components Download link: https://github.com/vaadin/claude-plugin/archive/main.zip#third-party-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.