React and Vue

The design system provides generated wrappers for React 19+ and Vue 3.5+. Their package roots are side-effect free and tree-shakeable. On the server and client, adapters render the complete semantic light-DOM tree: native controls, labels, messages, inline icons, accessibility relationships, state, and application content. Import the matching registration entry point once at the client boundary to attach custom-element behavior without changing that framework-owned topology. Also load the tokens and global component styles once in your application.

import "@aidsgn/tokens/css";
import "@aidsgn/components/styles.css";
import "@aidsgn/react/register"; // or @aidsgn/vue/register

The packages also export registerAidsgnElements() when application code needs to await browser registration before calling an imperative custom-element method.

styles.css includes every component. For selective loading, import @aidsgn/components/styles/reset.css, styles/shared.css, and individual modules such as styles/button.css instead.

React

import { useRef } from "react";
import { AidsgnDialog } from "@aidsgn/react";
import type { AidsgnDialog as AidsgnDialogElement } from "@aidsgn/components";

export function DeleteDialog() {
  const dialog = useRef<AidsgnDialogElement>(null);

  return (
    <AidsgnDialog
      ref={dialog}
      heading="Delete item?"
      onAidsgnClose={(event) => console.log(event.detail)}
    >
      <button onClick={() => dialog.current?.close()}>Cancel</button>
    </AidsgnDialog>
  );
}

Props use React casing, such as closeLabel and readOnly. Custom events use callback props such as onAidsgnClose, and refs point to the native custom-element host.

Vue

<script setup lang="ts">
import { ref } from "vue";
import { AidsgnDialog } from "@aidsgn/vue";

const dialog = ref<InstanceType<typeof AidsgnDialog>>();
</script>

<template>
  <AidsgnDialog ref="dialog" heading="Delete item?" @aidsgn-close="console.log($event.detail)">
    <button @click="dialog?.element?.close()">Cancel</button>
  </AidsgnDialog>
</template>

Vue props are reactive, custom events retain their dash-cased native names, and the component ref exposes the native host as element.

If you prefer native <aidsgn-*> tags in Vue templates, configure Vue’s compilerOptions.isCustomElement with the exported isAidsgnElement helper.

Generated from the manifest

Component names, attributes, public fields, and custom events come from packages/components/custom-elements.json. Complete structure comes from the shared canonical render contract. Repository contributors run pnpm wrappers:generate after changing either input; pnpm wrappers:check prevents stale generated files or inventory drift from landing.

Wrapper Storybooks

The React and Vue packages each have a dedicated Storybook that imports the generated package entry point exactly as an application would. Their typed stories cover every generated wrapper, including props, default slots, custom events, and element refs.

All three Storybooks expose an aidsgn/Offprint Brand toolbar and a separate Light, Dark, or System Theme-mode toolbar for documentation, controls, canvas, semantic tokens, and native form-control color scheme. The separate Storybook Backgrounds control is disabled because the active semantic surface already supplies the correct canvas background.

• Run pnpm storybook:react for React on port 6007.
• Run pnpm storybook:vue for Vue on port 6008.
• Run pnpm storybook:build to build the native, React, and Vue catalogs together.

Next.js SSR showcase

The repository includes a Next.js App Router fixture with Server Component pages for overview, forms, and exploration examples. Passive adapters render without a package-wide client boundary, while interactive compositions use a narrow application boundary. Its production test validates every component’s complete canonical structure in raw responses and uses Chromium to catch hydration errors or full-page navigation.

The same fixture consumes the public Tailwind CSS v4 theme through PostCSS. It verifies semantic utility output in initial server HTML, correct first-paint System/Light/Dark and alternate Brand values, complete typography recipes, responsive/container variants, and hydration without warnings.

• Run pnpm next to inspect the fixture on port 3000.
• Run pnpm build && pnpm test:ssr:next to exercise the production SSR path.

Nuxt SSR showcase

The Nuxt 4 fixture distributes every generated Vue wrapper across overview, forms, and exploration pages rendered by a production Nitro Node server. Its production test validates every component’s complete canonical structure before registration, then uses Chromium to catch hydration errors or full-page navigation.

• Run pnpm nuxt to inspect the fixture on port 3001.
• Run pnpm build && pnpm test:ssr:nuxt to exercise its production SSR path.
• Run pnpm test:ssr after building to verify both framework fixtures.