FormsCN

Installation

Get started with FormSCN in your Next.js or React project.

Prerequisites

Before you begin, make sure you have:

  • Node.js 18+ installed
  • A React or Next.js project
  • pnpm, npm, or yarn package manager
  • shadcn/ui initialized in your project

Quick Installation (Recommended)

The easiest way to get started is using the Form Builder:

  1. Go to Form Builder
  2. Choose or create a form
  3. Click "Generate Unique Command"
  4. Run the command in your terminal:
npx shadcn@latest add https://formscn.com/api/r/YOUR_FORM_ID.json

This installs:

  • The form component
  • All required shadcn/ui components
  • Form library (React Hook Form or TanStack Form)
  • Zod validation library

Manual Installation

Step 1: Initialize shadcn/ui

If you haven't already:

npx shadcn@latest init

Step 2: Check Dependencies

Use the Form Builder to generate your form, then check the Integrate → Component tab to see which shadcn components you need.

Install them:

npx shadcn@latest add button input form card label textarea select checkbox radio-group

Install only what your form actually uses.

Step 3: Install Form Libraries

For React Hook Form:

npm install react-hook-form @hookform/resolvers zod

For TanStack Form:

npm install @tanstack/react-form zod @tanstack/zod-form-adapter

Step 4: Copy the Code

Copy the generated form code from the Integrate → Component tab and paste it into your project (e.g., components/my-form.tsx).

Optional: Add Better Auth

Authentication is completely optional. Only add it if your form needs auth features.

Install Better Auth

npm install better-auth

Configure Auth

Enable Better Auth in the Form Builder:

  1. Go to Advanced section in the sidebar
  2. Toggle "Add Better Auth"
  3. Configure OAuth providers and plugins
  4. Go to Integrate → Auth & DB tab
  5. Copy the generated config files
  6. Follow the Setup Guide for integration steps

Database Setup

If using Better Auth, sync your database schema:

For Prisma:

npx @better-auth/cli generate
npx prisma migrate dev

For Drizzle:

npx @better-auth/cli migrate

TypeScript Configuration

Ensure your tsconfig.json has the following settings:

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Project Structure

After installation, your project will look like:

my-app/
├── components/
│   ├── ui/              # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── input.tsx
│   │   └── ...
│   └── contact-form.tsx # Your generated form
├── lib/
│   └── utils.ts         # shadcn utils
└── ...

If you enabled Better Auth, you'll also have:

my-app/
├── lib/
│   ├── auth.ts          # Better Auth config
│   └── auth-client.ts   # Auth client setup
├── prisma/
│   └── schema.prisma    # If using Prisma
└── ...

Next Steps

Now that FormSCN is installed:

Troubleshooting

Missing Components

If you see import errors, you likely missed some shadcn components. Check the shadcn Dependencies section in the Form Builder and install missing components.

Type Errors

Make sure you have strict: true in your tsconfig.json and all dependencies are installed.

Form Not Working

Ensure you:

  1. Installed all required shadcn components
  2. Installed the correct form library (RHF or TanStack)
  3. Installed Zod validation library
  4. Copied the code correctly

Getting Help

  • Check the Form Builder for live examples
  • Browse Templates for inspiration
  • Join our community for support
IntroductionCLI