formscn

Introduction

Welcome to FormSCN documentation. FormSCN is a powerful Open Source form building library that helps you create beautiful, accessible forms with minimal effort.

Features

  • Pre-built Components: Ready-to-use form components built with shadcn/ui
  • CLI Integration: Install components directly with shadcn add
  • Better Auth Integrated: Full authentication support (OAuth, Email/Password) out of the box
  • Framework Agnostic: Generate code for Next.js, Vite, TanStack Start, and Remix
  • Multi-Step Support: Build complex onboarding flows and wizards with built-in state management and animations
  • Type-Safe: Full TypeScript support with React Hook Form and Zod
  • Visual Editor: Customize forms visually and get a unique CLI install command
  • Every Form is Editable: You own the code. No vendor lock-in.
  • Accessible: Built with accessibility in mind using Base UI primitives
  • Open Source: MIT Licensed and community-driven

Available Templates

FormSCN comes with a variety of pre-built templates to get you started quickly:

  • Authentication: Login and Signup forms with OAuth integration
  • Multi-Step Wizards: Onboarding flows and Detailed Applications with step navigation
  • E-commerce: Checkout forms with payment method selection
  • Contact & Support: Contact forms, Support Tickets, and Booking Requests
  • Surveys: Feedback and Event Registration forms

Getting Started

The most powerful way to use FormSCN is via the Visual Builder:

  1. Go to the Form Builder.
  2. Customize your form (add fields, auth, validation).
  3. Publish and get your unique shadcn add command.

Alternatively, you can install the base components manually:

npx shadcn@latest add @formscn/base-form

Or check out the Installation guide for manual setup.

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>
  );
}

Community

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

Installation