Installation

BuzzForm offers two installation paths depending on your UI setup.

This is the recommended path for most users. Installs pre-built field components that match your shadcn design system.

Add Registry to Config

Add the BuzzForm registry to your components.json:

components.json

{
  "registries": {
    "@buzzform": "https://form.buildnbuzz.com/r/{name}.json"
  }
}

We're working on eliminating this manual step in future updates.

Install Components

Install everything with one command:

npx shadcn@latest add @buzzform/all

This installs:

@buildnbuzz/form-react (includes core logic and TanStack Form)
All field components (text, email, select, checkbox, etc.)
Form components (Form, FormContent, FormFields, etc.)
Complete registry at components/buzzform/registry.ts

Install Individual Fields

If you prefer to install fields individually:

# Core packages + template registry
npx shadcn@latest add @buzzform/init

# Then add fields as needed
npx shadcn@latest add @buzzform/text
npx shadcn@latest add @buzzform/email
npx shadcn@latest add @buzzform/select
# ... etc

After installing each field, uncomment the corresponding import in components/buzzform/registry.ts.

Use this path if you want to build your own field components with a custom UI library (Radix, Mantine, Chakra, plain HTML, etc.).

Install Packages

Install the React package:

pnpm add @buildnbuzz/form-react

@buildnbuzz/form-react includes all necessary dependencies, including the framework-agnostic core and TanStack Form. You don't need to install them manually.

Build Custom Components

Create your own field components using BuzzForm hooks:

components/my-form/text-field.tsx

"use client";

import { useDataField } from "@buildnbuzz/form-react";
import type { TextField as TextFieldDef } from "@buildnbuzz/form-react";

export function TextField() {
  const { fieldApi, handleChange, handleBlur, label, isRequired } =
    useDataField<TextFieldDef>();

  return (
    <div>
      <label htmlFor={fieldApi.name}>
        {label}
        {isRequired && <span>*</span>}
      </label>
      <input
        id={fieldApi.name}
        value={fieldApi.state.value ?? ""}
        onChange={(e) => handleChange(e.target.value)}
        onBlur={handleBlur}
      />
    </div>
  );
}

Create Registry

Build your field registry:

components/my-form/registry.ts

"use client";

import type { FieldRegistry } from "@buildnbuzz/form-react";
import { TextField } from "./text-field";
import { EmailField } from "./email-field";

export const registry: FieldRegistry = {
  text: TextField,
  email: EmailField,
  // ... add more fields
};

Set Up Provider (Optional)

Wrap your app root with FormProvider to make the registry available globally:

app/layout.tsx

import { FormProvider } from "@buildnbuzz/form-react";
import { registry } from "@/components/buzzform/registry"; // or your custom registry

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

Alternatively, pass registries.fields directly to each <Form> component instead of using the provider. See Form Component for details.

Verification

Create a simple form to verify your setup:

app/verify-form.tsx

"use client";

import { defineSchema } from "@buildnbuzz/form-react";
import {
  Form,
  FormContent,
  FormFields,
  FormSubmit,
} from "@/components/buzzform/form";

const schema = defineSchema({
  fields: [
    { type: "text", name: "name", label: "Name", required: true },
    { type: "email", name: "email", label: "Email", required: true },
  ],
});

export function VerifyForm() {
  return (
    <Form
      schema={schema}
      onSubmit={({ value }) => {
        console.log(value);
      }}
    >
      <FormContent>
        <FormFields />
        <FormSubmit>Submit</FormSubmit>
      </FormContent>
    </Form>
  );
}

If the form renders and submits without errors, you're good to go.

For a complete working example with validation and conditional logic, see Quick Start.

Installation

On this page