#What is FormSCN?

FormSCN is a powerful, open-source visual builder that lets developers create shadcn/ui-powered forms without manually copying and assembling code. It's designed for React/Next.js developers using shadcn/ui, Tailwind CSS, TypeScript, Zod, and either React Hook Form or TanStack Form who want to build beautiful, validated, production-ready forms faster. Perfect for SaaS apps, authentication flows, onboarding wizards, profile settings, and any project needing complex, type-safe forms with minimal boilerplate. By offering a drag-and-drop interface, real-time previews, automatic validation schemas, and seamless export to clean TypeScript code, FormSCN bridges the gap between visual builders and full code ownership—while staying 100% compatible with shadcn/ui's copy-paste philosophy. It also includes deep integration with Better Auth for authentication features and supports Next.js 15.

#Features ⚡

• Drag & Drop Visual Editor: Build forms visually with real-time code generation and live preview of shadcn/ui components.

• Form Library Choice: Switch effortlessly between React Hook Form and TanStack Form.

• Automatic Zod Schemas: Generates fully typed Zod validation schemas with inferred TypeScript types for form data.

• Multi-Step Wizards: Create complex multi-page forms with automatic state management and per-step validation.

• Better Auth Integration: Add 2FA, Passkeys, Magic Links, OAuth providers, and more in one click.

• Template Library: Ready-to-clone shadcn/ui templates (Signup Form, 2FA Setup, Org Invitation, Passkey Management, Profile Settings, etc.).

• shadcn/ui Native: Built exclusively for shadcn/ui components (Input, Button, Select, etc.)—no extra learning curve.

• Production-Ready Export: Download clean, copy-paste TypeScript code that integrates directly into your project.

#Pros ✅

• Saves massive time on form boilerplate while keeping full code ownership.

• Excellent type-safety and validation thanks to auto-generated Zod + TypeScript.

• Seamless Better Auth support makes auth flows (especially secure ones) much easier.

• Multi-step wizard handling is a huge win for onboarding and checkout experiences.

• Completely open-source with weekly updates and community contributions welcome.

• Stays true to shadcn/ui's philosophy—no runtime dependencies or magic.

#Cons ⚠️

• Requires existing shadcn/ui setup (Tailwind config, components installed) to use exported code.

• Visual builder is web-based, so no local/offline mode or CLI-first workflow.

• Focused on forms only—not a full page/section builder.

• Still early-stage open-source project; some advanced form patterns may need manual tweaks post-export.

#Included Components - Templates

• Signup / Registration Form: Classic user creation with email/password fields.

• 2FA Setup: Multi-factor authentication configuration.

• Org Invitation: Team/workspace invitation form.

• Passkey Management: Passkey creation and management UI.

• Profile Settings: User profile update form with various input types.

• Multi-Step Wizard: Base structure for complex, multi-page flows (e.g., onboarding, checkout).

• Core shadcn/ui Elements: Leverages Input, Button, Select, Checkbox, Radio, Textarea, etc.

#Pricing 💸

• 100% free and open-source with no tiers, subscriptions, or paid features.

• Full access to the visual builder, templates, exports, and source code.

• MIT license (assumed based on typical shadcn/ui ecosystem projects).

#Integrations 🧰

• shadcn/ui: Built exclusively around shadcn/ui components and styling.

• React Hook Form & TanStack Form: Toggleable form state management.

• Zod: Automatic schema generation and validation.

• Better Auth: One-click auth features (2FA, Passkeys, Magic Links, OAuth).

• Next.js 15: Fully compatible and highlighted support.

• Drizzle & Prisma: Works well with these ORMs for backend form handling.

• Tailwind CSS & TypeScript: Core styling and typing foundation.