Installation

Requirements

• Node.js 20 or later
• React 18 or 19
• Tailwind CSS v4 (for the React renderer styles)

Install Packages

FieldCraft is split into two packages: a headless core engine and a React renderer. Install both:

npm install @squaredr/fieldcraft-core @squaredr/fieldcraft-react

Or with pnpm / yarn:

pnpm add @squaredr/fieldcraft-core @squaredr/fieldcraft-react
# or
yarn add @squaredr/fieldcraft-core @squaredr/fieldcraft-react

Import Styles

The React package ships a pre-built CSS file with all 36 component styles. Import it once in your app entry point:

import "@squaredr/fieldcraft-react/styles.css";

Using Tailwind CSS v4

If your project already uses Tailwind CSS v4, you can scan the FieldCraft component sources directly instead of importing the pre-built stylesheet. This produces a single unified CSS build with no duplicate base resets.

@import "tailwindcss";

/* Scan FieldCraft component classes */
@source "node_modules/@squaredr/fieldcraft-react/dist/**/*.js";

Peer Dependencies

The React package requires react and react-dom as peer dependencies:

Storage Adapters (Optional)

If you want to persist form responses to a database or external service, install one of the storage adapters. All three are free and open source (MIT).

# Supabase — fastest setup with built-in auth & RLS
npm install @squaredr/fieldcraft-supabase

# Postgres — direct PostgreSQL via Drizzle ORM
npm install @squaredr/fieldcraft-postgres

# Webhook — send to any HTTP endpoint with HMAC signing
npm install @squaredr/fieldcraft-webhook

TypeScript

All packages ship with full type declarations (.d.ts). No additional @types/ packages needed.

Next Steps

Head to the Quick Start guide to render your first form.