Clerk Next.js Sign Up Page (App Router)

1import { SignUp } from '@clerk/nextjs';
2import { ChartLine, Clock, ShieldCheck, Sparkles } from 'lucide-react';
3 
4export default function SignUpPage() {
5  return (
6    <div className='bg-muted grid flex-1 lg:grid-cols-2'>
7      <div className='hidden flex-1 items-center justify-end p-6 md:p-10 lg:flex'>
8        <ul className='max-w-sm space-y-8'>
9          <li>
10            <div className='flex items-center gap-2'>
11              <Clock className='size-4' />
12              <p className='font-semibold'>Save on development time</p>
13            </div>
14            <p className='text-muted-foreground mt-2 text-sm'>
15              Add authentication and user management to your app with just a few lines of code.
16            </p>
17          </li>
18          <li>
19            <div className='flex items-center gap-2'>
20              <ChartLine className='size-4' />
21              <p className='font-semibold'>Increase engagement</p>
22            </div>
23            <p className='text-muted-foreground mt-2 text-sm'>
24              Add intuitive UIs designed to decrease friction for your users.
25            </p>
26          </li>
27          <li>
28            <div className='flex items-center gap-2'>
29              <ShieldCheck className='size-4' />
30              <p className='font-semibold'>Protect your users</p>
31            </div>
32            <p className='text-muted-foreground mt-2 text-sm'>
33              Enable features like two-step verification and enjoy automatic security updates.
34            </p>
35          </li>
36          <li>
37            <div className='flex items-center gap-2'>
38              <Sparkles className='size-4' />
39              <p className='font-semibold'>Match your brand</p>
40            </div>
41            <p className='text-muted-foreground mt-2 text-sm'>
42              Theme our pre-built components, or integrate with our easy-to-use APIs.
43            </p>
44          </li>
45        </ul>
46      </div>
47      <div className='flex flex-1 items-center justify-center p-6 md:p-10 lg:justify-start'>
48        <SignUp />
49      </div>
50    </div>
51  );
52}