BuzzForm

A schema-driven form library for React built on TanStack Form. Define your form once and get type-safe forms with validation, conditional logic, and full rendering control.

BuzzForm separates form logic from UI — define schemas in plain TypeScript, get automatic type inference, and render with your favorite UI library (shadcn/ui, Radix, Mantine, or custom components).

Perfect for settings pages, dashboards, and SaaS apps that need flexible, maintainable forms.

✨ Features

Schema-Driven Forms — Define your form structure in a simple TypeScript object
Full Type Safety — End-to-end TypeScript with auto-inferred types from your schema
TanStack Form Core — Built on TanStack Form for battle-tested state management
UI Agnostic — Bring your own UI or use the shadcn/ui registry components
17+ Field Types — Text, Number, Password, Select, Date, Checkbox, Switch, Radio, Textarea, Tags, Array, Group, Collapsible, Tabs, Row, and more
Conditional Logic — Show/hide/disable fields with declarative conditions (no callbacks)
Auto Validation — Validators derived from schema properties plus custom rules
Dynamic Values — Reference other fields or external context in labels, defaults, and validators
Minimal Boilerplate — Focus on your form logic, not wiring

📦 Monorepo Structure

This Turborepo contains:

├── apps/
│   └── web/                    # Documentation site & component registry
│
├── packages/
│   ├── form-core/              # Framework-agnostic primitives (@buildnbuzz/form-core)
│   ├── form-react/             # React adapter (@buildnbuzz/form-react)
│   ├── buzzform/               # DEPRECATED - legacy package
│   └── eslint-config/          # Shared ESLint config

Apps

| Directory | Description | | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | apps/web | The BuzzForm documentation website, component registry, and showcase examples. Built with Next.js, Fumadocs, and TailwindCSS. |

Packages

| Package | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------ | | @buildnbuzz/form-core | Core Package — Framework-agnostic schema types, validation, and utilities. Zero DOM dependencies. | | @buildnbuzz/form-react | React Adapter — React primitives built on TanStack Form. Hooks, providers, and field renderers. | | @buildnbuzz/buzzform | Deprecated — Legacy package. Migrate to form-core + form-react. See Migration Guide. |

🚀 Quick Start

Installation

With shadcn/ui:

# Add registry to components.json first, then:
npx shadcn@latest add @buzzform/all

Headless / Custom UI:

pnpm add @buildnbuzz/form-core @buildnbuzz/form-react

See Installation for full setup instructions.

Basic Usage

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

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

export type ContactData = InferType<typeof contactSchema.fields>;

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

export function ContactForm() {
  return (
    <Form schema={contactSchema} onSubmit={({ value }) => console.log(value)}>
      <FormContent>
        <FormFields />
        <FormSubmit>Send Message</FormSubmit>
      </FormContent>
    </Form>
  );
}

See Quick Start for a complete example with validation and server actions.

🛠 Development

pnpm install    # Install dependencies
pnpm dev        # Start development
pnpm build      # Build all packages

See Development for detailed setup.

📚 Documentation

Visit form.buildnbuzz.com for full documentation:

🤝 Contributing

Contributions welcome! See Contributing Guide for details.

📄 License

<p align="center"> Made with 💛 by <a href="https://buildnbuzz.com">BuildnBuzz</a> </p>

Buzzform

Install / Use

README