In short
This Lovable SaaS template is a full set of matching screens for a B2B SaaS: signup, plan selection, workspace setup, an analytics dashboard with an empty state, team and API key settings, billing and pricing. Build it in Lovable one screen at a time, with Supabase for sign in, workspaces and data, and the whole app shares one professional design.
Who this SaaS app template is for
Founders building a B2B product with Lovable who want the boring but essential parts, like signup, workspaces, team invites, API keys and billing, to look as good as the core feature.
Most AI-built SaaS apps look fine on the dashboard and fall apart in settings and billing. Starting from a complete set means every screen a customer sees is designed, which is what makes a small product feel trustworthy enough to pay for.
What each key screen must get right
Signup
One primary way to sign up above the fold, social sign in, and nothing that asks for more than name, email and password.
Empty dashboard
One clear first action, not a page of zeros. This is the screen that decides whether a trial turns into a customer.
Team settings
Roles, pending invites with resend and revoke, and a clear owner.
Billing
Current plan, usage against limits, the next invoice date and a way to download past invoices.
SaaS app screens, one by one
1. Signup page
A split layout with the form on one side and a product preview on the other. Email and Google sign up, a password rule shown inline, and a link to log in. The preview reminds people what they are signing up for.
2. Magic link login
Passwordless sign in: one email field and a button that sends a link. It removes forgotten passwords, the most common support request in a young SaaS, and works well with Supabase Auth.
3. Plan selection
Three plans side by side with the recommended one highlighted, a monthly and yearly toggle and a clear free option. Shown right after signup, it sets expectations before the user invests time.
4. Workspace setup
Name the workspace and invite teammates in one short step. Creating the workspace here means every later screen and query can be scoped to it from the start.
5. Dashboard empty state
What a new user sees before any data exists: a short welcome, one primary action and a preview of what the dashboard will show. It is the screen that most decides trial conversion.
6. Main dashboard
Metric cards with change from last period, a main chart, a breakdown table and filters for date range. Designed to read in five seconds, then reward a closer look.
7. Team settings
Members with roles, pending invites with resend and revoke, and an invite form. Clear ownership avoids the classic problem of a workspace nobody can administer.
8. API keys
A list of keys with labels, created and last used dates, a create button that shows the new key once, and revoke. The pattern developers expect from serious tools.
9. Billing
Current plan, usage bars against limits, payment method, next invoice date and an invoice table with downloads. Everything a customer checks before renewing.
10. Pricing page
The public pricing page: plans, a yearly discount, a comparison table and pricing FAQ. It matches the in-app plan selection so the offer looks the same everywhere.
How to build this SaaS app in Lovable
Signup and auth first
Paste the build prompt, then the signup template. Connect Supabase so accounts and profiles exist before anything else.
Workspaces before data
Build plan selection and workspace setup next, so every dashboard query can be scoped to a workspace.
Dashboard with an empty state
Add the empty state and the main dashboard together, using sample events so the charts have something to show.
Settings, keys and billing last
Finish with team, API keys and billing, then connect Stripe to the plans in your workspaces table.
Supabase tables
The data a SaaS app needs. Lovable creates these when you connect Supabase.
profilesOne row per user: name, avatar, current workspace.workspacesName, plan, owner and created date.workspace_membersWho belongs to which workspace, with a role.invitesPending email invites with a token and expiry.api_keysHashed key, label, last used, revoked flag.eventsThe data your dashboard charts, per workspace.Lovable SaaS template build prompt
The full Lovable prompt for this SaaS app: build order, Supabase tables, row level security, auth and design rules, ready to paste.
Lovable build prompt: SaaS appBuild a SaaS app called [product name] for [audience]. Use React, Tailwind CSS and Supabase. DESIGN I will paste a BrowserMoon template for each screen. Match every template exactly: fonts, spacing, colours, corner radius and components. All screens must look like one product. Every screen works at 375px wide with no horizontal scroll.
Common mistakes and how to avoid them
Building the dashboard before signup and workspaces
Build in the order on this page: the data model depends on workspaces existing first.
One user equals one account
Model workspaces and members from day one; adding teams later means rewriting every query.
Skipping the empty state
Design what a brand new user sees; it is the most viewed screen in a trial.
Hard-coding plan limits in the UI
Store plans and limits in a table so pricing changes do not need a deploy.
How to grow your SaaS app after launch
Once customers are in, the next screens most SaaS products need are an integrations page, an audit log and usage-based billing. The account and billing set has matching integrations and security settings templates, so new screens keep the same design.
For growth, add a public changelog and an in-app announcement banner, and connect product analytics to the events table so you can see which features trial users touch before they pay.
SaaS app launch checklist
- A second test account in another workspace cannot see the first workspace's data.
- Invites expire, can be revoked, and accepting one adds the member with the right role.
- API keys are shown once, stored hashed, and revoked keys stop working immediately.
- Changing plan in Stripe updates the workspace plan and its limits.
- The empty dashboard explains the first step in one sentence.
- Billing shows the next invoice date and past invoices download correctly.
Frequently asked questions
Is there a SaaS template for Lovable?
Yes. This one is a full set of matching SaaS screens, from signup to billing, that you build in Lovable in order. Lovable adds Supabase for sign in and data.
How do I build a SaaS with Lovable?
Start with signup and the main dashboard, connect Supabase, then add plan selection, workspace setup, settings and billing one prompt at a time, each from its template.
Does it include payments?
The billing and pricing screens are designed for Stripe. Ask Lovable to connect Stripe checkout and the customer portal once the app works.
Can I change the dashboard to my product?
Yes. Tell Lovable what your product measures, and it swaps the metrics, chart and table for your data while keeping the design.
Can I add a free trial?
Yes. Add a trial end date to the workspaces table and ask Lovable to show a banner and limit features when it passes.
Does it support multiple workspaces per user?
Yes. The workspace_members table lets one person belong to several workspaces with a different role in each.
Lovable templates by category
More Lovable starter templates