Introduction

BuzzForm is a schema-driven form library for React. Define your form as a plain object and BuzzForm handles rendering, validation, and conditional logic — with full TypeScript inference.

It ships as two packages:

• @buildnbuzz/form-core — framework-agnostic types, validation, and utilities. No React, no DOM.
• @buildnbuzz/form-react — React adapter built on TanStack Form. Provides useForm, <Form>, <FormProvider>, and field hooks.

The UI layer is delivered as a shadcn registry — install field components into your codebase and customize them freely.

Why BuzzForm?

Building forms in React is repetitive. You end up writing the same input wiring, validation logic, and conditional visibility code over and over. BuzzForm lets you declare your form structure once:

import { defineSchema, type InferType } from "@buildnbuzz/form-react";

const schema = defineSchema({
  fields: [
    { type: "text", name: "name", label: "Full Name", required: true },
    { type: "email", name: "email", label: "Email", required: true },
    {
      type: "password",
      name: "password",
      label: "Password",
      minLength: 8,
      criteria: { requireUppercase: true, requireNumber: true },
    },
  ],
});

type FormData = InferType<typeof schema.fields>;
// { name: string; email: string; password: string }

And get rendering, validation, and typed submission data automatically:

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

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

Key Features

Quick Install

With shadcn/ui:

npx shadcn@latest add @buzzform/all

Headless / Custom UI:

pnpm add @buildnbuzz/form-react

How It Works

1. Install — add the core packages and field components via the shadcn registry
2. Define a schema — create a FormSchema with a fields array using defineSchema()
3. Wrap with provider — add <FormProvider registry={registry}> to your root layout
4. Render — use <Form schema={schema}> with <FormContent>, <FormFields />, and <FormSubmit> — fields render automatically via your registry
5. Handle submission — get fully typed data in your onSubmit callback

import { defineSchema, type InferType } from "@buildnbuzz/form-react";import { Form, FormContent, FormFields, FormSubmit } from "@/components/buzzform/form";import { toast } from "sonner";// 1. Define schemaconst schema = defineSchema({  fields: [    { type: "text", name: "name", label: "Full Name", required: true },    { type: "email", name: "email", label: "Email", required: true },    { type: "password", name: "password", label: "Password", minLength: 8 },  ],});// 2. Infer typetype FormData = InferType<typeof schema.fields>;// { name: string; email: string; password: string }// 3. Render formexport function SignUpForm() {  return (    <Form      schema={schema}      onSubmit={({ value }) => {        const data = value as FormData;        toast("Account created!", { description: data.email });      }}    >      <FormContent>        <FormFields />        <FormSubmit>Create Account</FormSubmit>      </FormContent>    </Form>  );}