DEV Community

Cover image for I Built a SaaS Dashboard From Scratch — Here's What I Included
Vladyusha
Vladyusha

Posted on

I Built a SaaS Dashboard From Scratch — Here's What I Included

I've built quite a few dashboards over the years.

And somehow, I keep rebuilding the same things.

Authentication.

Settings.

Tables.

Billing.

User management.

CRM screens.

Navigation.

The actual product is usually the interesting part. The dashboard infrastructure isn't.

So recently I decided to build a complete SaaS dashboard template that I could reuse for future projects.

What I wanted to build

I didn't want another template with a sidebar, three cards and a chart.

The goal was to have something that could actually be used as the starting point for a real SaaS application.

So I included the things I usually end up building anyway:

Authentication, dashboard pages, CRM modules, settings, billing and other common SaaS screens.

The idea is simple:

Start with the boring parts already done and spend your time building the actual product.

The stack

I wanted to keep the stack relatively simple.

The template is built with:

  • React 19
  • Vite
  • TypeScript
  • TanStack Router
  • TanStack Query
  • shadcn/ui
  • Tailwind CSS v4

I also wanted the codebase to stay easy to modify.

There is no complicated proprietary framework around it. It's a frontend codebase that you can take and adapt to your own application.

The Dashboard

The main dashboard contains the usual overview information, statistics, charts and recent activity.

But I tried to make it feel more like a real product than a demo.

The goal was to have enough structure that you could connect your own API and start replacing the mock data instead of rebuilding the whole interface.

CRM

I also added CRM-related screens.

Things like contacts, companies, activity and other views that are common in SaaS applications.

This was one of the parts that took more time than I expected because a CRM isn't really one component.

It's a collection of tables, filters, search, forms, details pages and different states.

Authentication

Authentication is another thing that almost every SaaS needs.

The template includes the basic authentication flow and corresponding screens.

Again, the point isn't to provide a complete backend authentication system.

It's to give you the UI and structure so you don't have to start from an empty project.

Settings

Settings pages are easy to underestimate.

There are usually a lot of small screens:

Profile.

Account.

Security.

Notifications.

Preferences.

I wanted these to already have a consistent visual system instead of creating each page from scratch.

Billing

Billing is another area where SaaS applications tend to look very similar.

The template includes billing-related UI and subscription management screens that can later be connected to whatever payment provider you use.

Why I built it

The main reason is actually pretty simple.

I was tired of starting every new SaaS project from zero.

Every time I would create the same sidebar.

The same authentication pages.

The same settings.

The same tables.

The same dashboard layout.

None of these things are particularly interesting to build for the tenth time.

So I decided to build them once and make the result reusable.

What I learned

The biggest thing I learned is that a dashboard template is much more than a collection of components.

The hard part isn't creating a beautiful button.

It's making dozens of screens feel like they belong to the same product.

Spacing has to be consistent.

Typography has to work everywhere.

Loading states need to make sense.

Empty states need to exist.

Tables need to work with different amounts of data.

And every page needs to feel like part of the same system.

That's where most of the work went.

What's next

I'm planning to keep improving the template based on feedback.

I'd also like to build more complete SaaS patterns rather than just individual components.

And I'm building Motoko UI alongside it, so some of the components and ideas will eventually become part of the open-source library as well.

For now, the Dashboard template is available for $49.

You can try the live demo here:

https://dash.motokoui.com/overview

I'd especially like to hear from other developers who build SaaS products.

What do you usually end up rebuilding every time you start a new project?

Top comments (0)