Integrations

Supported integration paths

The verified integration contract covers Button, Input, Dialog, and Theme. Native HTML/CSS components work in each template system; other optional catalog enhancements follow their own installation contracts. These packages are local prereleases, not published npm releases.

Run a working example

From the repository root, use Node 24.15 or newer for the optional framework toolchain. Framework dependencies belong to the examples; they are never loaded by standalone pages.

npm ci
npm run build:integrations
npm run test:integrations
node ops/frameworks/serve.mjs

Preview ports: standalone 8100, React 8101, Vue 8102, Next.js 8103, Nuxt 8104, Svelte 8105, Angular 8106, and Astro 8107. Open /examples/standalone/index.html on port 8100.

Read the example setup guide or try the standalone theme demo.

Standalone, with as many pages as you need

For a multipage site, serve ordinary HTML files and navigate with real links. No npm install, framework runtime, or build is required. The example includes a workspace and an About page.

For a single-page app, mount behavior when a view appears and dispose it before replacing the view. The standalone example includes hash navigation, browser back/forward, document titles, and focus management. Hash URLs work on a static host without rewrite rules; bring a different router when your application needs one.

import {createDialog} from './packages/core/dialog.js';
import {mountTheme, aurora} from './packages/core/theme.js';
const theme = mountTheme(view, aurora, 'light');
const dialog = createDialog(view.querySelector('dialog'));
// Before replacing the view:
dialog.dispose();
theme.dispose();

Keep framework state and native behavior in sync

React and Vue expose components. Angular adds standalone directives to native elements so its existing form value accessors stay in charge. Svelte uses native bindings and a dialog action. Astro renders HTML components and reconnects its native dialog enhancement as pages change.

Import @layout-ui/core/components.css inside an existing app, add a Theme scope, and include utilities.css only if you want the layout helpers. Standalone pages can use styles.css. No Tailwind build is required.

Applications own validation, data, and routing. Pass errors to the React/Vue Input component, or link a native error message with aria-describedby. Reset controlled values in your form’s reset handler. Never run the legacy dialog initializer on a dialog already owned by an adapter.

Rendering and navigation

Use the same initial theme mode on the server and client. React, Vue, and Svelte render theme tokens before hydration; Angular and Astro render theme styles with their HTML. Dialogs become modal only after browser mounting.

The Next.js example keeps state and callbacks in a Client Component below a server page. Nuxt uses the Vue adapter and page routing. Astro’s example cleans up page listeners before swaps, and its dialog reconnects afterward. Angular’s AOT example prerenders HTML and hydrates it in the browser. The Svelte compiler/runtime has SSR and hydration tests; a SvelteKit application is not included.

Verification you can repeat

The suite builds every example and checks form events, reset, disabled controls, theme changes, lifecycle cleanup, and applicable server rendering and hydration. Production server checks cover Next.js and Nuxt; Angular’s built bundle is tested without its JIT compiler. Browser checks cover native modal behavior, Escape, focus return, and navigation.

Read the machine-readable support matrix. Tests describe the versions and component contracts above, not every version or third-party plugin. Packages remain prerelease while the wider component adapter catalog grows.