Next.js + Supabase Auth starter template with shadcn-UI and Tailwind CSS

⚡Demo:

View Vercel Demo

NOTE: Every resource used in this project are free to use for a certain threshold.

Things to keep in mind while testing 🤯.

• Supabase restricts user registration. So if, you are unable to Sign up as a new user, don't worry!
• I've provided the test Login credentials in the .env.local.example file. Use those to test out things!

Star ⭐ this repository if you find this useful 🙂.

🚀 Getting Started

1. Run the following command to create a new project with this starter.

yarn create next-app my-app -e https://github.com/Sahil-Sharma-23/supa-next-shad-auth
# or
npx create-next-app my-app -e https://github.com/Sahil-Sharma-23/supa-next-shad-auth

2. Initialize a project in Supabase. See it how!

3. Rename .env.local.example file to .env.local and add the SUPABASE_URL & SUPABASE_ANON_KEY generated after creating project in Supabase.

4. Once the project is setup and the dependencies are finished installing, you can navigate to that directory and start up the development server with:

yarn dev
# or
npm run dev

Open http://localhost:3000/ with your browser to see your new project!

🤯🧐 What's inside?

This starter includes:

1. NextJS starter
2. TypeScript
3. Supabase (Supabase authentication)
4. ShadCN-UI
5. NextJS Server Actions
6. Tailwind CSS
7. Zod

👌 Features:

• Fully responsive to all screen sizes.
• Built with TypeScript.
• Fully Type Safe.
• Secure use of Server actions.
• User friendly UI with loading states.
• Fully customizable.

📚 Learn more about NextJS

To learn more about NextJS, take a look at the following resources:

• NextJS Documentation - learn more about NextJS features and API.
• Learn NextJS - an interactive NextJS tutorial.

You can checkout the NextJS Github Repository - your feedback and contributions are welcome.

📚 Learn more about Supabase

To learn more about Supabase, take a look at the following resources:

• Supabase Documentation - learn more about Supabase features, API and Supabase SDK.
• Get Started with Supabase - get started with Supabase in a few minutes.
• NextJS with Supabase - get familier working with supabase in NextJS.

You can checkout the Supabase Github Repository - your feedback and contributions are welcome.

📚 Learn more about ShadCN-UI:

To learn more about ShadCN-UI, take a look at the following resources:

• ShadCN Documentation - learn more about working with ShadCN-UI.
• ShadCN Themes - Get started with ShadCN themes.
• ShadCN-UI with NextJS - learn how ShadCN-UI working with NextJS.

You can checkout the ShadCN-UI Github Repository - your feedback and contributions are welcome.

📚 Learn more about Tailwind CSS:

To learn more about Tailwind CSS, take a look at the following resources:

• Tailwind CSS Docs - learn more about Tailwind CSS.
• Tailwind with NextJS - get started on working with Tailwind CSS in NextJS projects.
• Join the Tailwind Community.

You can checkout the Tailwind CSS Github Repository - your feedback and contributions are welcome.

Author: Sahil Sharma (India)

• Portfolio - Visit my portfolio.
• Github - View my Github profile.