Registry & EasyForm
The @easy-forms shadcn registry, the files it ejects, easyFormsRegistry, and the EasyForm wrapper.
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-formSee Installation for the full setup.
Registry items
| Item | What you get |
|---|---|
@easy-forms/easy-form | The whole kit: every renderer + registry.ts + group-renderer.tsx + wizard.tsx + the <EasyForm> wrapper. |
@easy-forms/registry | registry.ts — the assembled easyFormsRegistry (pulls all renderers). |
@easy-forms/field-shell | FieldShell — the shared label + description + inline-error wrapper. |
@easy-forms/text, …/email, …/number, …/textarea, …/select, …/multiselect, …/checkbox, …/checkbox-list, …/radio-group, …/date, …/file, …/custom | One renderer per control. Each pulls field-shell + the canonical shadcn primitives it needs. |
@easy-forms/group-renderer | GroupRenderer — draws a group's fields, owns the grid/stack layout, and CSS-hides hidden groups. |
@easy-forms/wizard | Wizard — the linear multi-step shell over core's useWizardRuntime. |
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 shell scaffolded at @/components/easy-forms/easy-form.tsx. It calls
useFormRuntime for all behaviour and renders only the
container, header, body, and footer — so you can restyle it freely without being able to
break form behaviour.
import { EasyForm } from '@/components/easy-forms/easy-form';
<EasyForm schema={schema} initialValues={initialValues} onSubmit={onSubmit} />;| Prop | Type | Default | Description |
|---|---|---|---|
| schema* | FormSchema<TFormData> | — | The form definition. |
| onSubmit* | (values: TFormData) => void | Promise<void> | — | Called with the validated, visible values on submit. |
| initialValues | Partial<TFormData> | — | Initial field values. |
| store | FormStore | — | Provide an external store instead of creating one internally. |
| dependencyHandlers | DependencyHandlerRegistry | — | Additional or replacement dependency handlers, merged over the defaults. |
| plugins | FormPlugin[] | — | Lifecycle plugins (logger, autosave, custom). |
| submitLabel | string | 'Submit' | Submit button label. |
| resetLabel | string | 'Reset' | Reset button label. |
| showReset | boolean | false | Show a reset button in the footer. |
| className | string | — | Class applied to the form element. |
| wizardNextLabel | string | — | Override the wizard Next label. |
| wizardPreviousLabel | string | — | Override the wizard Previous label. |
When schema.wizard is present, <EasyForm> renders <Wizard> instead of a single page and
lets it own the submit flow. Hidden fields — via field or group visibility — are excluded from
the onSubmit payload.
easyFormsRegistry
The assembled control → renderer map at @/components/easy-forms/registry.ts. It's the
registry <EasyForm> provides via RendererRegistryContext. 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,group-renderer.tsx,wizard.tsx.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.