'use client' import { z } from "zod" import { useForm } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { toast } from "sonner" import { LinkIcon } from "lucide-react" import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent } from "@/components/ui/card" const formSchema = z .object({ name: z.string().min(1, "Name is required"), email: z.string().email("Invalid email"), password: z.string().min(6, "Password must be at least 6 characters"), confirmPassword: z.string(), newsletter: z.boolean().optional(), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords do not match", path: ["confirmPassword"], }) type FormData = z.infer export default function NewSignUpForm() { const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { name: "", email: "", password: "", confirmPassword: "", newsletter: false, }, }) const onSubmit = (data: FormData) => { toast.success("Account created successfully!", { description: `Welcome, ${data.name}!`, }) form.reset() } return (

Create new account for workspace

( Name )} /> ( Email )} /> ( Password )} /> ( Confirm Password )} /> ( Sign up to our newsletter )} />

By signing in, you agree to our{" "} Terms of use {" "} and{" "} Privacy policy

Already have an account?{" "} Sign in

) }

Simple Form

Installation

Shadcn CLI

Preview

Create new account for workspace

On this page