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.
- 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
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
| Directory |
Description |
apps/web |
The BuzzForm documentation website, component registry, and showcase examples. Built with Next.js, Fumadocs, and TailwindCSS. |
| 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. |
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.
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.
pnpm install # Install dependencies
pnpm dev # Start development
pnpm build # Build all packages
See Development for detailed setup.
Visit form.buildnbuzz.com for full documentation:
Contributions welcome! See Contributing Guide for details.
MIT © Parth Lad / BuildnBuzz
Made with 💛 by BuildnBuzz
