# React Form Gen

> [View this product on lib-pro](https://lib-pro-3f8437.gitlab.io/libs/react-form-gen) · Ship every form. None of the boilerplate.

**Outcome:** Ship your next form in under 5 minutes.

Hand it a Zod schema, get back a fully-typed, accessible form — labels, validation, error states, focus management. Multi-step wizards, conditional fields, custom component slots. Zero boilerplate.

**Price:** £15 — lifetime · **Category:** React Library · **Tech:** React 18+, TypeScript, Zod, Tailwind CSS

| Metric | Value |
|--------|-------|
| Time per form | 5 min |
| Lines of code | 1 |
| Accessibility | WCAG AA |

## Quick start

```bash
npm install react-form-gen zod react-hook-form @hookform/resolvers
```

- # Drop in. Add your schema. Done.
- npm run dev
- # First form in 5 minutes

## Code preview

```tsx
import { FormGen } from 'react-form-gen'
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1, 'Required'),
  email: z.string().email(),
  password: z.string().min(8),
  plan: z.enum(['free', 'pro', 'team']),
  agreed: z.literal(true),
})

export default function Signup() {
  return (
    <FormGen
      schema={schema}
      onSubmit={createUser}
      submitLabel="Create account"
    />
  )
}
```

## Use cases

### 1. SaaS sign-up & onboarding

Multi-step wizard with conditional fields. Plan choice, team size, payment — different paths per choice.

**Outcome:** Ship onboarding in a day, not a sprint.

### 2. Checkout & payment forms

Address, billing, review — with server-side validation that matches your Zod schema byte for byte.

**Outcome:** Cut checkout drop-off with proper a11y.

### 3. Admin panels & CMS

Create/edit screens for any resource. Type-safe, validated, with the same UX across every entity.

**Outcome:** One form component, every CRUD screen.

### 4. Settings & preferences

Show/hide fields based on the user's plan. Override the password field with your auth UI. Keep the validation.

**Outcome:** Settings pages that scale with the product.

## Built for

- Frontend engineers shipping fast
- Indie hackers & solo founders
- Design engineers who want their own component slots
- Teams standardising on Zod

## Highlights

### One-line form definition

Hand it a Zod schema and you get a fully-typed, accessible form — labels, error states, focus management included.

### Composable when you need it

Custom component slots, field overrides, conditional fields, multi-step wizards. The escape hatches are first-class.

### Looks good out of the box

Shadcn-style with Tailwind. Light & dark mode. Bring your own theme tokens and everything tracks.

## What's in the box

- `FormGen component` — the main entry point
- `useFormGen hook` — for custom layouts
- `8 field components` — text, number, date, select, etc.
- `Wizard layout` — multi-step, optional
- `Conditional fields` — show/hide by value
- `TypeScript types` — fully exported
- `Tailwind theme tokens` — override anything
- `Full source + docs` — no obfuscation

## Works with

- **React 18+** (peer dep)
- **Zod 3+** (schema source)
- **react-hook-form** (peer dep)
- **Vite / Next.js / Remix** (tested)
- **Shadcn/ui themes** (drop-in)
- **Tailwind CSS** (styling)

## Features

- Zod schema → type-safe form in one line
- Built-in validation with error states
- Multi-step wizard mode
- Conditional fields (show/hide based on values)
- Custom component slots
- Shadcn/ui & Tailwind styled — easy to customize
- Dark mode support
- Full TypeScript types exported

## FAQ

### Is this compatible with react-hook-form?

Yes — it's built on top of react-hook-form and @hookform/resolvers. You get all the perf benefits and can drop into native RHF APIs when you need to.

### Can I use my own field components?

Yes. The `fieldComponents` prop maps field types (text, select, etc.) to your components, and `fieldOverrides` maps by field name for per-field swaps.

### What about CSS — does it bring its own?

It ships with Tailwind classes that match shadcn/ui. Override the classes via the `className` prop, or pass your own field components to fully take over.

### Can I use it in a commercial product?

Yes. The commercial license lets you use it in unlimited commercial and personal projects. You can't redistribute the source.