Installation

FormForge is a copy-paste component library (like shadcn/ui), not an npm package yet. Clone the repo, install the docs app dependencies, then copy the components you need into your project.

git clone https://github.com/lefkosp/formforge.git
cd formforge
npm install

In your own React app, install the peer dependencies FormForge components expect:

npm install react-hook-form @hookform/resolvers zod class-variance-authority clsx tailwind-merge

Copy field components from src/components/ui/ into your project, along with any Radix primitives they import. Each docs page includes a live preview and copyable example.

Basic Setup

Import and use FormForge components in your React application:

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, FormProvider } from "react-hook-form";
import { z } from "zod";
import InputField from "@/components/ui/InputField";

const formSchema = z.object({
  email: z.string().email({ message: "Invalid email address." }),
});

export default function MyForm() {
  const methods = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  return (
    <FormProvider {...methods}>
      <form>
        <InputField
          name="email"
          label="Email"
          type="email"
          placeholder="you@example.com"
        />
      </form>
    </FormProvider>
  );
}

Styling

FormForge uses Tailwind CSS for styling. Make sure you have Tailwind CSS configured in your project. The components are designed to work with the default Tailwind theme but can be customized to match your design system.

TypeScript

FormForge is built with TypeScript and provides full type safety. All components include proper TypeScript definitions, and the integration with Zod ensures that your form data is fully typed.

Next Steps

Browse the components in the sidebar, try the visual form builder, and copy the examples into your app.