FormsCN

Introduction

Welcome to FormSCN documentation. FormSCN is the visual form builder for shadcn/ui—helping you create beautiful, accessible forms with drag-and-drop simplicity.

What is FormSCN?

FormSCN is an open-source tool that lets you:

  • Design forms visually with a drag-and-drop editor
  • Generate production-ready code using shadcn/ui components
  • Choose your form library: React Hook Form or TanStack Form
  • Add auth optionally via Better Auth (OAuth, 2FA, Magic Links, etc.)
  • Export or install via CLI with one command

Core Features

Visual Form Builder

Build forms visually without writing code. See live preview as you design.

shadcn/ui Components

Every form uses your existing shadcn/ui components (Button, Input, Select, etc.). No learning curve.

Choose Your Form Library

Toggle between:

  • React Hook Form (industry standard)
  • TanStack Form (modern, headless)

Same visual builder, different output—you own the code.

shadcn Dependencies Detection

Automatically detects which shadcn components your form needs and provides the installation command.

Optional Better Auth

Add authentication features when you need them:

  • OAuth providers (Google, GitHub, etc.)
  • Email/Password authentication
  • Two-Factor Authentication (2FA)
  • Magic Links
  • Passkeys
  • Organizations

Auth is completely optional—use it only when you need it.

Framework Support

Generate code for:

  • Next.js (App Router & Pages Router)
  • Vite/React
  • TanStack Start
  • Remix

Type-Safe by Default

Full TypeScript support with auto-generated Zod schemas.

CLI Integration

Install forms directly with:

npx shadcn@latest add https://formscn.com/api/r/YOUR_FORM_ID.json

Available Templates

FormSCN comes with 20+ pre-built templates organized by category:

  • Authentication: Login, Signup, Password Reset, Change Password (all auth-optional)
  • Organization: Invitations, Team Management
  • Multi-Step Wizards: Onboarding, Detailed Applications
  • E-commerce: Checkout forms
  • Contact & Support: Contact forms, Support Tickets, Booking Requests
  • Profile: Settings, Address forms
  • Marketing: Waitlist, Newsletter, Event Registration

Getting Started

The fastest way to use FormSCN is the Visual Builder:

  1. Go to the Form Builder
  2. Choose a template or start from scratch
  3. Customize your form (add fields, validation, optional auth)
  4. Select your preferred form library (RHF or TanStack)
  5. Publish and get your unique shadcn add command
  6. Install and use!

Or check out the Quick Start guide for step-by-step instructions.

Quick Example

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

export default function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={form.handleSubmit((data) => console.log(data))}>
      {/* Form fields */}
    </form>
  );
}

Why FormSCN?

  • Built for shadcn/ui: Designed specifically for the shadcn/ui ecosystem
  • No Vendor Lock-in: You own the generated code
  • Open Source: MIT Licensed and community-driven
  • Accessibility: Built with accessibility in mind

Community

Join our community to get help, share your work, and contribute to FormSCN.

Installation