gem-hunter

formcn

Features

Prerequisites

npx shadcn@latest init

Installation

npm install -g formcn

yarn global add formcn

npx formcn

Usage

formcn

Example

$ formcn

formcn

✔ react-hook-form detected
✔ @hookform/resolvers detected
✔ zod detected
✔ shadcn/ui components detected

Form name: register
Form type: single step
Template: registration
Preset: default

✔ Form generated at src/components/forms/register

Generated Output

Single-step form

src/components/forms/{formName}/
├── schema.ts
└── form.tsx

Multi-step form

src/components/forms/user-registration/
├── personal-info-schema.ts
├── personalInfoStep.tsx
├── account-details-schema.ts
├── accountDetailsStep.tsx
├── contact-info-schema.ts
├── contactInfoStep.tsx
└── UserRegistrationForm.tsx

Supported Field Types

Templates

Single-step

Multi-step

Style Presets

Single-step

Multi-step

Example Output

Schema (schema.ts)

import { z } from "zod";

export const schema = z
  .object({
    first_name: z.string().min(1, "First Name is required"),
    last_name: z.string().min(1, "Last Name is required"),
    email: z.string().email("Invalid email"),
    password: z.string().min(8, "Password must be at least 8 characters"),
    passwordConfirmation: z.string(),
    age: z.coerce.number().min(18, "Age must be at least 18"),
    website: z.string().url("Invalid URL").optional().or(z.literal("")),
    bio: z.string().optional(),
    country: z.union([z.literal("us"), z.literal("ca"), z.literal("uk")], {
      error: "Please select a country",
    }),
    newsletter: z.boolean().optional(),
  })
  .refine((data) => data.password === data.passwordConfirmation, {
    message: "Passwords do not match",
    path: ["passwordConfirmation"],
  });

export type SchemaFormValues = z.infer<typeof schema>;

Form (form.tsx)

"use client";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { schema, type SchemaFormValues } from "./schema";

export default function RegisterForm() {
  const form = useForm<SchemaFormValues>({
    resolver: zodResolver(schema),
  });

  function onSubmit(values: SchemaFormValues) {
    console.log(values);
  }

  return (
    <form
      onSubmit={form.handleSubmit(onSubmit)}
      className="space-y-6 max-w-3xl mx-auto border rounded-lg p-6"
    >
      <FieldGroup />
      <div className="flex justify-end">
        <Button type="submit" disabled={!form.formState.isValid}>
          Submit
        </Button>
      </div>
    </form>
  );
}

Troubleshooting

Command not found

npm config get prefix

shadcn/ui not detected

npx shadcn@latest init

Missing dependencies

npm install react-hook-form @hookform/resolvers zod

Contributing

License

Author

Acknowledgments