v1.0.0 · published on npm

Build consistent, configuration-driven React forms without reinventing your UI infrastructure.

Prism connects React Hook Form, Zod, and Tailwind CSS through a single, strongly typed configuration surface, while preserving full access to each library's native API. Not another component library. Not a black box.

Get Started View on GitHub

npm install @prismrepo/core @prismrepo/forms @prismrepo/react \
  @prismrepo/adapter-rhf @prismrepo/adapter-zod react-hook-form zod
npm install -D @prismrepo/cli

npm install @prismrepo/core @prismrepo/forms @prismrepo/react \  @prismrepo/adapter-rhf @prismrepo/adapter-zod react-hook-form zodnpm install -D @prismrepo/cli

Quick start

A complete form, typed end to end.

Required-field and schema validation, real submission handling, no invented API, every line below is a real export.

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email address'),
});

const definition = createFormBuilder(registry).defineForm<FormValues>({
  name: { type: 'text', label: 'Name' },
  email: { type: 'text', label: 'Email' },
});

function ProfileForm() {
  const form = usePrismForm(definition, {
    defaultValues: { name: '', email: '' },
    resolver: createZodResolver(schema),
  });

  return (
    <form onSubmit={form.handleSubmit((values) => console.log(values))}>
      <PrismField form={form} name="name" />
      <PrismField form={form} name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

const schema = z.object({  name: z.string().min(1, 'Name is required'),  email: z.string().email('Invalid email address'),});const definition = createFormBuilder(registry).defineForm<FormValues>({  name: { type: 'text', label: 'Name' },  email: { type: 'text', label: 'Email' },});function ProfileForm() {  const form = usePrismForm(definition, {    defaultValues: { name: '', email: '' },    resolver: createZodResolver(schema),  });  return (    <form onSubmit={form.handleSubmit((values) => console.log(values))}>      <PrismField form={form} name="name" />      <PrismField form={form} name="email" />      <button type="submit">Submit</button>    </form>  );}

See the full walkthrough

Why Prism

Configuration-driven

Declare which fields exist and what type each one is, once, as a typed configuration object, not a hand-assembled tree of Controllers.

Strong TypeScript inference

A field's configuration is checked against its component's actual value type. A string-only field can't be configured against a numeric form field.

Bring your own library

Prism adapts React Hook Form and Zod, libraries you already chose. It never replaces them, and it never bundles a competing implementation.

No black box

usePrismForm returns the complete, real React Hook Form object. Every method you already know still works, unmodified.

Package ecosystem

Six focused packages, not one monolith.

@prismrepo/core

Framework-independent, React-free contracts. No runtime dependencies.

@prismrepo/forms

The registry and form-builder contracts: defineRegistry, createFormBuilder.

@prismrepo/react

Optional React integration: PrismProvider, usePrismRegistry.

@prismrepo/adapter-rhf

Binds Prism to React Hook Form: usePrismForm, PrismField.

@prismrepo/adapter-zod

Adapts a Zod schema into the resolver usePrismForm accepts.

@prismrepo/cli

The prismrepo command. Installs copy-in primitives and field components.

Package responsibilities and dependency direction

Ready to build your first form?

Install Prism, run the CLI, and have a working, validated form in a few minutes.

Quick Start Read the docs