Registry & EasyForm

The UI ships as a shadcn registry, not an npm package. You add components with the shadcn CLI and they're copied into your repo under @/components/easy-forms/ — you own them.

Install

Add the @easy-forms namespace to components.json, then add the kit:

{
	"registries": {
		"@easy-forms": "https://chandima301.github.io/easy-forms/r/{name}.json"
	}
}

npx shadcn@latest add @easy-forms/easy-form

See Installation for the full setup.

Registry items

Add the whole kit (@easy-forms/easy-form) or just the controls you need (npx shadcn@latest add @easy-forms/select).

<EasyForm>

The pre-wired wrapper scaffolded at @/components/easy-forms/easy-form.tsx — it's <Form> with the renderer registry and chrome styles baked in, so there's no registry prop:

type EasyFormProps<TFormData> = Omit<FormProps<TFormData>, 'registry'>;

import { EasyForm } from '@/components/easy-forms/easy-form';

<EasyForm schema={schema} initialValues={initialValues} onSubmit={onSubmit} />;

It accepts everything <Form> does except registry.

easyFormsRegistry

The assembled control → renderer map at @/components/easy-forms/registry.ts. It's what <EasyForm> passes to <Form>. Edit it to add a control or point one at your own renderer — see Theming & customization.

Files you own

shadcn add @easy-forms/easy-form writes into your repo:

• components/easy-forms/*-renderer.tsx — one per control (e.g. text-renderer.tsx, dropdown-renderer.tsx).
• components/easy-forms/field-shell.tsx, registry.ts, easy-form.tsx, easy-forms.css.
• components/ui/* — the canonical shadcn primitives the renderers use (input, select, checkbox, radio-group, popover, label, textarea).

All of it is editable. Each renderer is a React component typed RendererProps<TQuestion> (question, value, onChange, onBlur, error, errors, touched, dirty); see Theming for how to build or swap one.