React and Vue

The design system provides generated wrappers for React 19+ and Vue 3.5+. In a browser, importing either package registers the native custom elements dynamically. On a server, the same entry point is safe to evaluate and renders declarative aidsgn-* markup without loading DOM-dependent component code. Also load the tokens and global component styles once in your application.

import "@aidsgn/tokens/css";
import "@aidsgn/components/styles.css";

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

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. Repository contributors run pnpm wrappers:generate after changing a public component API; pnpm wrappers:check prevents stale generated files 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.

• 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 a Server Component page and an interactive client showcase of common React wrappers. Its production test fetches the running server and verifies that representative custom-element markup is already present in the initial HTML response.

• 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 renders common generated Vue wrappers through a production Nitro Node server. The browser later registers and upgrades the custom elements, while the live SSR check confirms that representative aidsgn-* markup is already present in the initial response.

• 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.