FormsCN

Quick Start

Get up and running with FormSCN in seconds.

1. Choose a Template

Browse our Templates Gallery with 20+ pre-built forms, or start from scratch in the Visual Editor.

All templates are auth-optional—use them with or without authentication.

2. Choose Your Form Library

In the editor sidebar, select your preferred form library:

  • React Hook Form (default): Battle-tested, industry standard
  • TanStack Form: Modern, headless, framework-agnostic

You can switch anytime—the visual builder adapts automatically.

3. Customize Your Form

Use the visual editor to:

  • Add/remove form fields
  • Configure validation rules
  • Adjust styling and layout
  • Add optional features (theme, multi-step)

4. Check Dependencies

Go to the Integrate tab → Component section.

FormSCN automatically detects which shadcn/ui components your form needs and provides the installation command:

npx shadcn@latest add button input form card

5. Get Your Form

Option A: CLI Installation (Recommended)

Click "Generate Unique Command" to publish your form, then run:

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

Option B: Copy Code

Copy the generated TypeScript code directly from the Integrate tab.

6. Use the Component

Import and use the form in your page:

import { ContactForm } from "@/components/contact-form"

export default function Page() {
  return (
    <div className="max-w-md mx-auto py-10">
      <ContactForm />
    </div>
  )
}

7. Optional: Add Authentication

Need auth? Enable it anytime:

  1. Go to Advanced section in the editor sidebar
  2. Toggle "Add Better Auth"
  3. Configure OAuth providers (Google, GitHub, etc.)
  4. Select plugins (2FA, Magic Links, etc.)
  5. Follow the Setup Guide in the Integrate tab

Customizing

All forms are fully type-safe and owned by you. You can modify:

  • The Zod schema in schema.ts
  • UI components directly in the form file
  • Form logic and handlers

Next Steps

CLIForm Builder