@digiform/wizard

v0.6.0

Published

2 days ago

React component for rendering configurable multi-step forms from a JSON config

0High
0Medium
0Low

hatsevlads

react form wizard stepper ui components

@digiform/wizard

React component for rendering configurable multi-step forms from a JSON config. Zero database dependencies.

Installation

npm install @digiform/wizard

Requires React 18+, XState 5+, TanStack Form 1+, Zod 3+, and Radix UI components as peer dependencies. See peerDependencies in package.json for exact versions.

CSS Import

Required: You must import the wizard stylesheet before rendering any wizard component.

import '@digiform/wizard/styles';

Add this import once at your app entry point before rendering any wizard.

Quick Start

import { FormWizard } from '@digiform/wizard';
import '@digiform/wizard/styles';

const config = { /* your FormWizardConfig */ };

export function MyForm() {
  return (
    <FormWizard
      config={config}
      onSubmit={(data) => console.log(data)}
    />
  );
}

Framework Setup

Vite

Install the package (see Installation above).

Import styles in src/main.tsx (or src/index.tsx) before ReactDOM.createRoot:

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@digiform/wizard/styles'; // must come before App
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Use <FormWizard> in any component — no vite.config.ts changes required.

// src/components/MyForm.tsx
import { FormWizard } from '@digiform/wizard';
import type { FormWizardConfig } from '@digiform/wizard';

const config: FormWizardConfig = {
  // your form configuration
};

export function MyForm() {
  return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
}

Next.js

Install the package (see Installation above).

Import styles in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):

// app/layout.tsx — App Router
import '@digiform/wizard/styles';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// pages/_app.tsx — Pages Router
import '@digiform/wizard/styles';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Mark the wrapping component with 'use client' — FormWizard is a client component.

Create a form page with the 'use client' directive:

// app/forms/page.tsx
'use client';

import { FormWizard } from '@digiform/wizard';
import type { FormWizardConfig } from '@digiform/wizard';

const config: FormWizardConfig = {
  // your form configuration
};

export default function FormsPage() {
  return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
}

No next.config.js changes are required for CSS.

Use @digiform/builder to visually create and edit form configs.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@digiform/wizard

Installation

CSS Import

Quick Start

Framework Setup

Vite

Next.js

Related