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/allHeadless / Custom UI:
pnpm add @buildnbuzz/form-core @buildnbuzz/form-reactSee Installation for full setup instructions.
import{defineSchema,typeInferType}from"@buildnbuzz/form-core";exportconstcontactSchema=defineSchema({fields: [{type: "text",name: "name",label: "Full Name",required: true},{type: "email",name: "email",label: "Email",required: true},],});exporttypeContactData=InferType<typeofcontactSchema.fields>;import{contactSchema}from"@/lib/schemas/contact";import{Form,FormContent,FormFields,FormSubmit}from"@/components/buzzform/form";exportfunctionContactForm(){return(<Formschema={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 packagesSee 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