Introducing BuzzForm

Build complex forms with ease and speed

Simple, type-safe forms with less boilerplate. Powered by schemas and built for shadcn/ui.

buzzform.tsxv1.0.0

import { createSchema } from "@buildnbuzz/buzzform";
import { Form } from "@/components/buzzform/form";

const schema = createSchema([
  {
    type: "text",
    name: "name",
    label: "Name",
    placeholder: "John Doe",
    required: true,
  },
  {
    type: "email",
    name: "email",
    label: "Email",
    placeholder: "john@example.com",
    required: true,
    autoComplete: "email",
  },
  {
    type: "password",
    name: "password",
    label: "Password",
    placeholder: "••••••••",
    required: true,
    minLength: 8,
    ui: { allowGenerate: true },
  },
  {
    type: "select",
    name: "role",
    label: "Role",
    options: [
      { label: "Developer", value: "dev" },
      { label: "Designer", value: "design" },
      { label: "Product Manager", value: "pm" },
    ],
    defaultValue: "dev",
    required: true,
  },
  {
    type: "checkbox",
    name: "terms",
    label: (
      <span>
        I agree to the
        <Link href="/terms">terms</Link> and
        <Link href="/privacy">privacy policy</Link>
      </span>
    ),
    required: true,
  },
]);

export default function MyForm() {
  return (
    <Form
      schema={schema}
      onSubmit={(data) => console.log(data)}
      submitLabel="Create Account"
    />
  );
}

import { createSchema } from "@buildnbuzz/buzzform";import { Form } from "@/components/buzzform/form";const schema = createSchema([  {    type: "text",    name: "name",    label: "Name",    placeholder: "John Doe",    required: true,  },  {    type: "email",    name: "email",    label: "Email",    placeholder: "john@example.com",    required: true,    autoComplete: "email",  },  {    type: "password",    name: "password",    label: "Password",    placeholder: "••••••••",    required: true,    minLength: 8,    ui: { allowGenerate: true },  },  {    type: "select",    name: "role",    label: "Role",    options: [      { label: "Developer", value: "dev" },      { label: "Designer", value: "design" },      { label: "Product Manager", value: "pm" },    ],    defaultValue: "dev",    required: true,  },  {    type: "checkbox",    name: "terms",    label: (      <span>        I agree to the        <Link href="/terms">terms</Link> and        <Link href="/privacy">privacy policy</Link>      </span>    ),    required: true,  },]);export default function MyForm() {  return (    <Form      schema={schema}      onSubmit={(data) => console.log(data)}      submitLabel="Create Account"    />  );}

Submitted data:

{
  // Submit the form to see data here
}

{  // Submit the form to see data here}

TypeScript JSX

Config

Explore all field types and features

Why BuzzForm?

Everything you need to build production-ready forms without the headache.

Schema-Driven

Define your entire form structure as a simple TypeScript schema. No JSX boilerplate, just clean configuration.

Type-Safe Validation

Auto-generated Zod schemas with full TypeScript inference. Catch errors at build time, not runtime.

Conditional Logic

Show, hide, or disable fields dynamically based on other field values. Build smart, reactive forms.

Shadcn Native

Built entirely on shadcn/ui components. Matches your design system perfectly out of the box.

Fully Customizable

Override any field with your own components. Full control when you need it, convenience when you don't.

17+ Field Types

Text, email, password, select, date, upload, tags, and more. Complex layouts with groups, arrays, and tabs.