Almost done with template perhaps. Have not tested yet though.

src/app/(auth-pages)/sign-up/page.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link';
+import { signUp } from '@/actions/auth';
+import { FormMessage, type Message, SubmitButton } from '@/components/default';
+import { Input, Label } from '@/components/ui';
+import { SmtpMessage } from '@/app/(auth-pages)/smtp-message';
+
+const SignUp = async (props: { searchParams: Promise<Message> }) => {
+  const searchParams = await props.searchParams;
+  if ('message' in searchParams) {
+    return (
+      <div
+        className='w-full flex-1 flex items-center h-screen
+        sm:max-w-md justify-center gap-2 p-4'
+      >
+        <FormMessage message={searchParams} />
+      </div>
+    );
+  } else {
+    return (
+      <>
+        <form className='flex flex-col min-w-64 max-w-64 mx-auto'>
+          <h1 className='text-2xl font-medium'>Sign up</h1>
+          <p className='text-sm text text-foreground'>
+            Already have an account?{' '}
+            <Link
+              className='text-primary font-medium underline'
+              href='/sign-in'
+            >
+              Sign in
+            </Link>
+          </p>
+          <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
+            <Label htmlFor='email'>Email</Label>
+            <Input name='email' placeholder='you@example.com' required />
+            <Label htmlFor='password'>Password</Label>
+            <Input
+              type='password'
+              name='password'
+              placeholder='Your password'
+              minLength={6}
+              required
+            />
+            <SubmitButton formAction={signUp} pendingText='Signing up...'>
+              Sign up
+            </SubmitButton>
+            <FormMessage message={searchParams} />
+          </div>
+        </form>
+        <SmtpMessage />
+      </>
+    );
+  }
+};
+export default SignUp;