Framework Integration

Framework Integration

HELIX components are standard custom elements — they work in any framework or no framework at all. This section covers the specific patterns and gotchas for each environment.

Why Framework-Specific Guides?

Web components are framework-agnostic by design, but frameworks differ in:

• Event binding — React uses synthetic events; Vue/Angular have their own binding syntax
• Boolean attributes — Frameworks handle disabled, required, etc. differently
• Form integration — React Controlled Components don’t interop with ElementInternals the same way
• TypeScript types — JSX type declarations differ from Angular template types
• SSR — Custom element registration is browser-only; each framework handles SSR differently

Choose Your Guide

Framework	Use Case
React	React 18+ (raw web components)
React Wrappers	@helixui/react — typed props, no addEventListener boilerplate
Next.js 15	Next.js 15 App Router, SSR, Server Actions
Vue	Vue 3, Nuxt
Angular	Angular 16+
Svelte	Svelte 5, SvelteKit
Astro	Astro 5, Starlight
Plain HTML	CDN / no-build setup
Drupal	Drupal CMS / Twig templates

Installation

The raw web component / framework guides (HTML, Angular, Vue, Svelte, Astro, Drupal, Next.js when used without wrappers) install the core library directly:

npm install @helixui/library

The React Wrappers guide uses the auto-generated React-specific package, which brings @helixui/library in as a dependency:

npm install @helixui/react

Or load the core library via CDN — see the Plain HTML guide.