The goal of Remix SaaS is to provide a lightweight, feature-rich, and production-ready Remix Stack for your next SaaS application.

• Live Demo - Give it a few seconds to load, it's running on a free tier! :)
• Introduction - Simple introduction to Remix SaaS (Recommended Read).
• Getting Started - Quick Start guide to get Remix SaaS up and running.
• Deployment - Step-by-step guide on how to deploy your Remix SaaS App to production.

Please, check the Guide docs in order to learn more about Remix SaaS.

A list of features that Remix SaaS provides out of the box:

• ⚡ Vite: Next-Gen Frontend Tooling.
• 🧩 Prisma ORM: Modern Database Toolkit.
• 🛍️ Stripe: Subscription Plans, Customer Portal, and more.
• 🔑 Authentication: Email Code, Magic Link and Social Logins.
• 🎨 TailwindCSS: Utility-First CSS Framework.
• 📐 ShadCN: Composable React components.
• 🌙 Easy Theming: Switch between Light and Dark modes with ease.
• 🗺️ Remix Flat Routes: Simple Route Definitions.
• 🍞 Client & Server Toasts: Display Toasts on your App.
• 🛡️ Server Rate Limiting: Extra layer of Protection for your App.
• 🕵️‍♂️ CSRF and Honeypot Protection: Prevent Malicious Attacks.
• 📧 Resend: Email for Developers.
• 💌 React Email: Customizable Emails with React.
• 📋 Conform: Type-Safe Form Validation based on Web Fundamentals.
• 📥 File Uploads: Profile Picture Uploads with Prisma.
• 🌐 I18N: Internationalization for your App.
• ⚙️ Github Actions: Automate CI/CD Workflows.

We've been looking into keeping Remix SaaS as simple as possible, while providing a solid foundation for your next SaaS project.

Some other "non-technical" features include:

• 💅 Modern UI: Carefully crafted UI with a Modern Design System.
• 🏕 Custom Pages: Landing, Onboarding, Dashboard and Admin Pages.
• 📱 Responsive: Works on all devices, from Mobile to Desktop.

We've created a simple demo that displays all template provided features. Psst! Give the site a few seconds to load! (It's running on a free tier!)

Here's a simple workflow you can follow to test the template:

1. Visit the Live Demo.
2. Log In with your preferred authentication method.
3. Select a Subscription Plan and fill the Stripe Checkout inputs with its test values.

Before starting our development or even deploying our template, we'll require to setup a few things (not many, I promise!) in order to have a smooth experience.

To get started, you can initialize the template into your workspace by running the following command:

npx create-remix-saas@latest

# Done! 🎉 Please, continue reading the documentation!

Remix SaaS requires a few environment variables to be set in order to work as expected. To keep it even simpler, on template initialization, some of these variables are already set for you.

Let's take a look at the required environment variables:

In order to send emails, Remix SaaS uses Resend, a simple and easy-to-use email service for developers.

• You can get your API Key by visiting the Resend Dashboard.

In order to use Stripe Subscriptions and seed our database, we'll require to get the secret keys from our Stripe Dashboard.

1. Create a Stripe Account or use an existing one.
2. Visit API Keys section and copy the Secret key.
3. Paste your secret key into .env file as STRIPE_SECRET_KEY.

In order to start receiving Stripe Events to our Webhook Endpoint, we'll require to install the Stripe CLI. Once installed run the following command in your console. (Make sure you're in the root of your project):

stripe listen --forward-to localhost:3000/api/webhook

This should give you a Webhook Secret Key. Copy and paste it into your .env file as STRIPE_WEBHOOK_ENDPOINT.

Before starting our development, we'll require to setup our Prisma Migrations. Remix SaaS uses Prisma as its ORM, with SQLite as its default database. You can change it to any other database supported by Prisma.

To start your migrations, and seed the Database, run the following command in your console:

npx prisma migrate dev --name init

Now that we have everything configured, we can start our development server. Run the following command in your console:

npm run dev

You should be able to access your app at 🎉 http://localhost:3000.

Please, make sure to check the rest of the documentation and learn more about Remix SaaS, its features and how to use them. A good starting point is the Authentication section, as it covers all the authentication methods, how to authenticate as admin, and more.

Deployment and some other docs are available in the Deployment section.

If you found Remix SaaS helpful, consider supporting it with a ⭐ Star. It helps the repository grow and provides the required motivation to continue maintaining the project. Thank you!

Huge thanks to our sponsors who makes it possible to maintain and improve Remix SaaS! 🙌

Support us! 💝