Installation

Two packages, and React 18 or newer in your app.

Install

npm
npm install @hardikrastogi/core @hardikrastogi/react
pnpm
pnpm add @hardikrastogi/core @hardikrastogi/react
yarn
yarn add @hardikrastogi/core @hardikrastogi/react

react and react-dom are peer dependencies: your app supplies them, so there is only ever one copy of React. If you only need validation on a server, install just @hardikrastogi/core.

Import the stylesheet once

The renderer ships a small stylesheet that gives fields sensible defaults. Import it once, near the root of your app.

main.tsx
import "@hardikrastogi/react/styles.css";

It only defines .df-* classes and CSS variables, so it will not collide with your own styles. You can skip it entirely and style the classes yourself.

Works in any React app

There are no framework-specific imports. It runs in Vite, Create React App, Remix and Next.js. The components are marked "use client", so in the Next.js App Router you can import them straight into a server component file and they render on the client.

TypeScript

Type declarations are included. Definitions are validated at runtime, and the input type is FormDefinitionInput from @hardikrastogi/core.