@generative-forms/react-form — Integration Examples

Example apps showing how to integrate @generative-forms/react-form across popular React frameworks and styling setups.

Examples

Directory	Stack
react/	React + Vite
react-tailwind-shadcn/	React + Vite + Tailwind CSS + shadcn/ui
next/	Next.js
next-tailwind-shadcn/	Next.js + Tailwind CSS + shadcn/ui
tanstack/	TanStack Router
tanstack-tailwind-shadcn/	TanStack Router + Tailwind CSS + shadcn/ui
astro/	Astro + React

Quick Start

Each example is a standalone app. Navigate into any directory and run:

npm install
npm run dev

Usage

Each example demonstrates the same three-step registration form built with @generative-forms/react-form.

1. Define your form config:

import { defineGenerativeFormConfig } from "@generative-forms/react-form";

export const configuration = defineGenerativeFormConfig({
  type: "formConfiguration",
  displayName: "Registration Form",
  id: "your-form-id",
  steps: [
    /* ... */
  ],
  columns: 2,
  labels: { submit: "Submit", next: "Next", back: "Back", submitting: "..." },
});

2. Render the form:

import { GenerativeForm } from "@generative-forms/react-form";
import { configuration } from "./config";

function App() {
  return (
    <GenerativeForm
      config={configuration}
      onStepSuccess={{
        personalInformationStep: (data) => {
          console.log(data.contactInformationGroup.emailAddress);
        },
      }}
      onSubmit={(data) => {
        console.log(
          data.preferencesStep.communicationSettingsGroup.contactMethod,
        );
      }}
    />
  );
}

Features Showcased

• Multi-step forms with a stepper UI
• Field types: text, number, textarea, select, radio, checkbox, switch
• Built-in validation (required, min/max length, pattern, min/max value)
• Per-step onStepSuccess callbacks with type-safe data access
• Type-safe onSubmit handler
• Dark/light mode support