Installation

Easy Forms is two pieces: the headless engine (@easy-forms/core, an npm package) and the UI, which you add to your own project with the shadcn CLI from the @easy-forms registry. The renderer components are copied into your repo — you own them and can edit them freely.

1. Install the engine

$ pnpm add @easy-forms/core

2. Make sure you have a shadcn project

The renderers are shadcn components, so your app needs Tailwind and a components.json. If you don't have one yet, run shadcn's init once:

npx shadcn@latest init

This configures Tailwind theme tokens, @/lib/utils, and components.json. Anything shadcn supports works — Vite, Next.js, Remix, Astro.

3. Register the @easy-forms namespace

Add the registry to the registries field of your components.json:

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

4. Add the components

Pull the whole kit — every renderer, the assembled registry, and the pre-wired <EasyForm> wrapper — in one command:

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

Or add just the controls you need and wire your own registry:

npx shadcn@latest add @easy-forms/text @easy-forms/select

Either way, the renderers land in @/components/easy-forms/ and the canonical shadcn primitives they use (input, select, checkbox, radio-group, popover, label, textarea) are pulled into @/components/ui/.

Peer dependencies

Verify it works

Continue to the Quick start to render your first form with <EasyForm>.