Next.jsReactAdmin dashboardSaaSStarter

novasaas — Next.js Admin dashboard Template

By dvanessa

An open-source SaaS admin dashboard template built with Next.js and TypeScript, including demo authentication, role permissions, theme switching, and dashboard interfaces. Requires your own backend integration.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-09View source

What stands out

A quick read of the recorded project description.

01

Responsive application shell with desktop and mobile navigation, plus a collapsible sidebar that remembers preferences

02

Dashboard displays metrics, revenue visualization, plan distribution, and activity records

03

Light, dark, and system-following themes, with a Cmd/Ctrl + K keyboard command menu

04

Demo authentication flows and typed role permissions, with permission-based navigation and client-side guards

05

Reusable components built on Radix UI primitives, plus a /design-system showcase page

06

Automated tests using Vitest and React Testing Library, with Netlify configuration included

Template Details

NovaSaaS Free is a SaaS admin dashboard frontend starter template built with Next.js, TypeScript, and Tailwind CSS. It provides a responsive application shell (desktop and mobile navigation), a collapsible sidebar that remembers browser preferences, a dashboard with metrics, revenue visualization, plan distribution, and activity records, plus light, dark, and system-following themes. UI components are built on Radix UI primitives and include a keyboard command menu (Cmd/Ctrl + K), notification previews, an organization switcher, and a user menu, with a design system showcase page at /design-system.

The template includes demo authentication flows (login, registration, password recovery, password reset, email verification) and typed role and permission configuration. Navigation shows or hides based on permissions and includes client-side route guards. Demo accounts are public frontend fixed data and are not verified by a server. Metrics, charts, users, organizations, subscriptions, billing, and more in the dashboard are all demo data.

The project explicitly states it is a frontend starter rather than a production-grade authentication system: sessions are simulated and stored in browser local storage, with no backend, database, OAuth, JWT, password hashing, real payment processing, or email sending. The sidebar also includes page entries for analytics, organizations, users, roles, subscriptions, billing, invoices, notifications, audit logs, and settings, but these pages only provide navigation, permission, and layout foundations and do not implement backend business operations. Production use requires integrating your own API and database and enforcing authorization on the server side.

Next.jsReactAdmin dashboardSaaSStarter

Is it right for your project?

Use Cases

  • As a frontend starting point for a SaaS admin interface, first set up the shell, navigation, and dashboard layout
  • Demonstrate or prototype permission-controlled navigation and access-restricted pages
  • As a reference implementation for a design system and accessible components (Radix UI primitives)

Suitable For

  • Developers who need a Next.js + TypeScript + Tailwind CSS admin frontend skeleton
  • Teams preparing to integrate their own API, database, and production authentication
  • Personal projects looking for a reference frontend implementation of role permissions and theme switching

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Requires Node.js 20.9 or higher and npm 10 or higher

  2. 2

    After cloning the repository, run npm ci to install dependencies, then npm run dev to start the development server

  3. 3

    Demo accounts (e.g., [email protected] / password) are public frontend fixed data and must not be used in production

  4. 4

    Before production use, replace the demo authentication service in src/features/auth/services/auth.service.ts and integrate your own backend and database

  5. 5

    When deploying to Netlify, use the build command npm run build and the publish directory .next; the project does not use static export

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This listing covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.

Must comply with when using

  • You may use, modify, commercialize, and distribute this version's code for free.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Project materials mention an optional paid version or features; this listing only covers the public free code and does not include paid upgrades.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
  • Demo accounts are only public frontend fixed data and are not verified by a server; they must never be reused in production.
  • Metrics, charts, activities, users, organizations, subscriptions, billing, and more in the dashboard are all demo data and cannot be used directly in production.
  • Before production use, you must integrate your own backend/API and database, enforce server-side authorization, and configure production authentication.
  • This project is a frontend starter, not a production-grade authentication system, and cannot be used directly for production authentication.
  • Sessions are simulated and stored only in browser local storage, without real security.
  • Route guards and hidden controls are presentational only, not security boundaries, and cannot be used as access control measures.
  • The project does not include a backend, database, OAuth, JWT, password hashing, real payment processing, or email sending.
  • Production authorization must be enforced by your own backend for every protected endpoint and data operation.
  • Pages such as analytics, organizations, users, roles, subscriptions, and billing only provide navigation, permission, and layout foundations and do not implement backend business operations.
  • Advanced data tables, CRUD workflows, configurable roles, billing interfaces, richer analytics, API adapters, and more are part of a future Pro version and are not included in the free version.
  • Deployment to Netlify relies on its automatically provided Next.js adapter; the project does not use static export.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

These credentials are public frontend fixtures. They do not authenticate against a server and must never be reused in production.

Original README

All dashboard metrics, charts, activities, users, organizations, subscriptions, billing values, and related records displayed in NovaSaaS Free are demonstration fixture data.

Original README

Before production use, connect your own backend/API and database, implement server-side authorization, and configure production authentication.

Original README

NovaSaaS Free is a frontend starter, not a production authentication system.

Original README

Sessions are simulated and stored in browser local storage.

Original README

Route guards and hidden controls are presentation behavior, not security boundaries.

Original README

There is no backend, database, OAuth, JWT, password hashing, real payment processing, or email delivery.

Original README

Production authorization must be enforced by your backend for every protected endpoint and data operation.

Original README

These pages intentionally provide navigation, permissions, and layout foundations without pretending to implement backend business operations.

Original README

A separate future Pro edition may add advanced data tables, CRUD workflows, organizations, configurable roles, billing screens, richer analytics, API adapters, and additional layouts.

Original README

Netlify automatically provides its Next.js adapter; this project does not use static export.

Original README
https://github.com/dvanessa/novasaas/blob/main/LICENSEhttps://github.com/dvanessa/novasaas/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-09. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
Next.js · React
Website type
Admin dashboard · SaaS · Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-10-09
Screenshot last checked
2026-10-09

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-10

Inspect the recorded source material

SHA-256: 4ae2c957659bb481b6513e2fd0bb805de129f8a3950b37936f660bd98a4279f8

2026-10-09T19:51:45.899Z

Source file / repository
# NovaSaaS Free

An open-source SaaS admin dashboard starter built with Next.js, TypeScript,
and Tailwind CSS. NovaSaaS provides a polished frontend foundation that you can
connect to your own API, database, authentication provider, and business logic.

[View the live demo](https://novasaas-v1.netlify.app/) ·
[Open the dashboard](https://novasaas-v1.netlify.app/login)

[Join the NovaSaaS Pro waitlist](https://novasaas-v1.netlify.app/#pro-waitlist)

![NovaSaaS Free dashboard](public/images/novasaas-dashboard.jpg)

## Highlights

- Responsive application shell with desktop and mobile navigation
- Collapsible sidebar with persisted browser preference
- Dashboard with metrics, revenue visualization, plan distribution, and activity
- Light, dark, and system themes
- Keyboard command menu with `Cmd/Ctrl + K`
- Notification preview, organization switcher, and user menu
- Demo authentication, registration, recovery, and email-verification flows
- Typed roles, permissions, permission-aware navigation, and client-side guards
- Reusable accessible components built with Radix UI primitives
- Design system showcase at `/design-system`
- Automated tests with Vitest and React Testing Library
- Netlify configuration included

## Demo accounts

| Role        | Email              | Password   |
| ----------- | ------------------ | ---------- |
| Super Admin | `[email protected]`   | `password` |
| Manager     | `[email protected]` | `password` |
| Member      | `[email protected]`  | `password` |

These credentials are public frontend fixtures. They do not authenticate
against a server and must never be reused in production.

All dashboard metrics, charts, activities, users, organizations, subscriptions,
billing values, and related records displayed in NovaSaaS Free are demonstration
fixture data. Before production use, connect your own backend/API and database,
implement server-side authorization, and configure production authentication.

## Technology

- Next.js 16 with the App Router
- React 19
- TypeScript in strict mode
- Tailwind CSS 4
- Radix UI primitives
- Lucide React
- React Hook Form and Zod
- next-themes
- Vitest and React Testing Library
- ESLint and Prettier

## Getting started

Requirements:

- Node.js 20.9 or newer
- npm 10 or newer

```bash
git clone https://github.com/dvanessa/novasaas.git
cd novasaas
npm ci
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

## Available scripts

```bash
npm run dev          # Start the development server
npm run build        # Create a production build
npm run start        # Run the production server
npm run lint         # Run ESLint
npm run typecheck    # Check TypeScript
npm run test         # Run the test suite
npm run audit:production # Audit production dependencies
npm run test:watch   # Run tests in watch mode
npm run format       # Format the codebase
npm run format:check # Check formatting
```

## Project structure

```text
src/
├── app/                 # App Router pages and layouts
├── components/
│   ├── auth/            # Authentication and permission guards
│   ├── dashboard/       # Application shell and dashboard modules
│   ├── theme/           # Theme provider and selector
│   └── ui/              # Reusable UI primitives
├── config/              # App, auth, navigation, and permissions config
├── features/auth/       # Forms, schemas, services, and auth tests
├── hooks/               # Authentication and permission hooks
├── lib/                 # Navigation, permissions, and shared utilities
├── stores/              # Demo session store
└── types/               # Shared TypeScript types
```

## Routes

The working demo includes:

- `/` — product landing page
- `/login`, `/register`, `/forgot-password`, `/reset-password`, `/verify-email`
- `/dashboard` — completed Free dashboard overview
- `/design-system` — tokens and component showcase
- `/forbidden` — access-denied state

The sidebar also includes integration-ready starter pages for analytics,
organizations, users, roles, subscriptions, billing, invoices, notifications,
audit logs, and settings. These pages intentionally provide navigation,
permissions, and layout foundations without pretending to implement backend
business operations.

## Authentication and security

NovaSaaS Free is a frontend starter, not a production authentication system.

- Sessions are simulated and stored in browser local storage.
- Route guards and hidden controls are presentation behavior, not security
  boundaries.
- There is no backend, database, OAuth, JWT, password hashing, real payment
  processing, or email delivery.
- Production authorization must be enforced by your backend for every protected
  endpoint and data operation.

The async interface in `src/features/auth/services/auth.service.ts` is the
replacement point for a real backend implementation.

## Customization

1. Update product metadata in `src/config/app.config.ts`.
2. Adjust semantic color tokens in `src/app/globals.css`.
3. Configure navigation in `src/config/navigation.ts`.
4. Configure roles and permissions in `src/config/permissions.config.ts`.
5. Replace the demo auth service with your server integration.
6. Replace dashboard fixture data with API responses.

## Deploying to Netlify

Import `dvanessa/novasaas` in Netlify and use:

```text
Base directory: (empty)
Build command: npm run build
Publish directory: .next
Production branch: main
```

The root `netlify.toml` contains the build and publish configuration. Netlify
automatically provides its Next.js adapter; this project does not use static
export.

## Free and Pro editions

NovaSaaS Free contains the reusable shell, dashboard overview, design system,
demo authentication, and permission foundations. A separate future Pro edition
may add advanced data tables, CRUD workflows, organizations, configurable
roles, billing screens, richer analytics, API adapters, and additional layouts.

| Capability                          | Free | Planned Pro |
| ----------------------------------- | :--: | :---------: |
| Responsive dashboard shell          |  ✓   |      ✓      |
| Theme and design system             |  ✓   |      ✓      |
| Demo auth and permissions           |  ✓   |      ✓      |
| Advanced analytics and filters      |  —   |      ✓      |
| Production-ready data tables        |  —   |      ✓      |
| Complete CRUD workflows             |  —   |      ✓      |
| Billing and invoice screens         |  —   |      ✓      |
| Additional layouts and API adapters |  —   |      ✓      |

Follow the repository to receive NovaSaaS Pro development updates.

## Contributing and feedback

Issues and feature suggestions are welcome in the
[GitHub repository](https://github.com/dvanessa/novasaas/issues). Please avoid
including passwords, tokens, customer data, or other private information in a
public issue.

## License

NovaSaaS Free is available under the [MIT License](LICENSE).

## Author

Created by Vanessa Duarte.
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.