@saastro/forms

Schema-driven React forms with Zod validation, React Hook Form, multi-step navigation, and a plugin system. You describe the form as a config (fluent builder or plain JSON) and bring your own UI components — typically shadcn/ui — via dependency injection; the library renders, validates, and submits it.

Full documentation: docs.forms.saastro.io

Installation

npm install @saastro/forms

Peer dependencies (install them in your app):

npm install react react-dom react-hook-form zod date-fns react-day-picker

The library ships no UI of its own — you inject your components (e.g. shadcn/ui). See the installation guide for the component setup and the npx @saastro/forms init CLI scaffold.

Add the stylesheet once in your app entry point (selected-state styles for button groups):

import '@saastro/forms/styles.css';

UI strings (button labels, placeholders, messages) default to English. Other languages flip everything in one line:

import { setDefaultMessages } from '@saastro/forms';
import { es } from '@saastro/forms/locales';

setDefaultMessages(es); // full Spanish locale ships built-in

Quick start

import { Form, FormBuilder } from '@saastro/forms';

// Auto-discover your shadcn/ui components at build time (Vite)
const uiComponents = import.meta.glob('@/components/ui/*.tsx', { eager: true });

const config = FormBuilder.create('contact')
  .addField('name', (f) => f.type('text').label('Name').required().minLength(2))
  .addField('email', (f) => f.type('email').label('Email').required().email())
  .addStep('main', ['name', 'email'])
  .buttons({ submit: { type: 'submit', label: 'Send' } })
  .onSuccess((values) => console.log('Submitted:', values))
  .build();

export function ContactForm() {
  return <Form config={config} components={uiComponents} />;
}

import.meta.glob is Vite-only, and @/ is the shadcn path alias from your own tsconfig — neither is required by the library. On any bundler you can pass components explicitly instead: components={{ Input, Button, Label, ... }}. See the quickstart and components guide.

Features

• 34 field types — text inputs, selects, comboboxes, toggles, dates, slider, OTP, file, repeater, hidden, and more (full list)
• Validation — Zod schemas or JSON-serializable rules with declarative builder methods (guide)
• Multi-step forms — conditional routing, progress UI, per-step validation (guide)
• Conditional logic — show/hide/disable fields by value, function, or declarative condition groups (guide)
• Submit actions — HTTP, webhook, email, and custom actions with triggers and field mapping (guide)
• 6 built-in plugins — localStorage, analytics, autosave, Databowl, reCAPTCHA, Turnstile (guide)
• Responsive layout — 12-column grid with per-breakpoint field spans (guide)
• i18n — locale overlays for labels, options, and messages; built-in defaults (button labels, success/error messages) are Spanish and overridable (guide)
• Hosted backend — <HubForm> loads and submits forms through the hosted service at submit.saastro.io (guide)
• TypeScript strict, ESM-only, tree-shakeable

Documentation

| | | | --- | --- | | Getting started | docs.forms.saastro.io/docs/introduction | | FormBuilder API | docs.forms.saastro.io/docs/formbuilder | | Field types | docs.forms.saastro.io/fields | | Hooks & reference | docs.forms.saastro.io/docs/form-component |

License

MIT