https://github.com/buildnbuzz/buzzform
BuzzForm: A simple, customizable React form library for shadcn/ui and Next.js. Declare fields once, fully control rendering, and get live validation + server actions with minimal boilerplate. Powered by React Hook Form + Zod. Ideal for polished dashboards and SaaS apps. Made by BuildnBuzz.
https://github.com/buildnbuzz/buzzform
nextjs react react-hook-form shadcn-ui tailwindcss zod
Last synced: 11 days ago
JSON representation
BuzzForm: A simple, customizable React form library for shadcn/ui and Next.js. Declare fields once, fully control rendering, and get live validation + server actions with minimal boilerplate. Powered by React Hook Form + Zod. Ideal for polished dashboards and SaaS apps. Made by BuildnBuzz.
- Host: GitHub
- URL: https://github.com/buildnbuzz/buzzform
- Owner: buildnbuzz
- License: mit
- Created: 2025-12-30T17:57:24.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T16:37:01.000Z (11 days ago)
- Last Synced: 2026-05-11T16:39:14.908Z (11 days ago)
- Topics: nextjs, react, react-hook-form, shadcn-ui, tailwindcss, zod
- Language: TypeScript
- Homepage: https://form.buildnbuzz.com
- Size: 2.12 MB
- Stars: 98
- Watchers: 2
- Forks: 4
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# BuzzForm
[](LICENSE)
[](https://www.npmjs.com/package/@buildnbuzz/form-core)
[](https://react.dev)
[](https://nextjs.org)
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](https://form.buildnbuzz.com/docs/migration). |
## 🚀 Quick Start
### Installation
**With shadcn/ui:**
```bash
# Add registry to components.json first, then:
npx shadcn@latest add @buzzform/all
```
**Headless / Custom UI:**
```bash
pnpm add @buildnbuzz/form-core @buildnbuzz/form-react
```
See [Installation](https://form.buildnbuzz.com/docs/installation) for full setup instructions.
### Basic Usage
```tsx title="lib/schemas/contact.ts"
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;
```
```tsx title="app/contact-form.tsx"
import { contactSchema } from "@/lib/schemas/contact";
import { Form, FormContent, FormFields, FormSubmit } from "@/components/buzzform/form";
export function ContactForm() {
return (
console.log(value)}>
Send Message
);
}
```
See [Quick Start](https://form.buildnbuzz.com/docs/quick-start) for a complete example with validation and server actions.
## 🛠 Development
```bash
pnpm install # Install dependencies
pnpm dev # Start development
pnpm build # Build all packages
```
See [Development](https://form.buildnbuzz.com/docs/development) for detailed setup.
## 📚 Documentation
Visit [form.buildnbuzz.com](https://form.buildnbuzz.com) for full documentation:
- [Quick Start](https://form.buildnbuzz.com/docs/quick-start)
- [Installation](https://form.buildnbuzz.com/docs/installation)
- [Schema Reference](https://form.buildnbuzz.com/docs/schema)
- [Validation](https://form.buildnbuzz.com/docs/validation)
- [Custom Fields](https://form.buildnbuzz.com/docs/custom-fields)
## 🤝 Contributing
Contributions welcome! See [Contributing Guide](https://form.buildnbuzz.com/docs/contributing) for details.
## 📄 License
MIT © [Parth Lad / BuildnBuzz](LICENSE)
---
Made with 💛 by BuildnBuzz