FormSCN

Overview

FormSCN is an open-source visual form builder for shadcn/ui and React. Forms are designed with drag-and-drop, previewed live, and exported as production-ready TypeScript for Next.js, Remix or Vite, using the shadcn/ui components already in a project.

The builder can output either React Hook Form or TanStack Form code from the same design, and every form gets a generated Zod schema. Optional Better Auth integration adds authentication features to forms in one click. The registry also offers 14 ready-made form blocks.

Features

• Drag-and-drop editor: Build forms visually and watch the code update in real time.
• Form library choice: Toggle output between React Hook Form and TanStack Form.
• Zod validation: Auto-generated schemas with inferred TypeScript types.
• Multi-step wizards: Per-step validation and state handling for onboarding and checkout flows.
• Better Auth integration: Optional 2FA, passkeys, magic links and OAuth providers.
• Templates: Signup, login, 2FA setup, org invitation, passkey management and more.
• Registry form blocks: Contact, newsletter, job application, feedback, event registration, waitlist, support ticket, booking request, e-commerce checkout and onboarding wizard forms.

Tech stack

• React, TypeScript, shadcn/ui, Tailwind CSS
• React Hook Form, TanStack Form, Zod
• Better Auth, Drizzle, Prisma

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @formscn/component-name