Installation

Package Manager

Install better-form using your preferred package manager:

npm install @better_form/core

Peer Dependencies

@better_form/core requires React 18 or 19 as a peer dependency:

npm install react react-dom

CSS Styles

Import the default styles in your app's entry point:

import '@better_form/core/styles';

Or in your CSS:

@import '@better_form/core/styles';

With Plugins

If you're using plugins like Google Places:

npm install @better_form/core @better_form/plugin-google-places

import '@better_form/core/styles';
import '@better_form/plugin-google-places/styles';

Framework-Specific Setup

Next.js (App Router)

app/layout.tsx

import '@better_form/core/styles';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Next.js (Pages Router)

pages/_app.tsx

import '@better_form/core/styles';
import type { AppProps } from 'next/app';
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Vite / Create React App

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@better_form/core/styles';
import App from './App';
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

TypeScript

better-form is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed.

import type { WizardConfig, WizardField } from '@better_form/core';

Verify Installation

Create a simple form to verify everything is working:

import { WizardProvider, WizardContainer, defaultFieldComponents } from '@better_form/core';
 
const config = {
  id: 'test-form',
  steps: [{
    id: 'step-1',
    title: 'Test',
    fieldGroups: [{
      id: 'group-1',
      fields: [{
        id: 'name',
        name: 'name',
        label: 'Your Name',
        type: 'text',
      }],
    }],
  }],
};
 
export default function TestForm() {
  return (
    <WizardProvider config={config} fieldComponents={defaultFieldComponents}>
      <WizardContainer />
    </WizardProvider>
  );
}

If you see a form with a text input, you're ready to go!

Introduction Quick Start