Notus NextJS

Notus NextJS is a free, open-source UI kit and admin dashboard template from Creative Tim, built on Next.js and styled entirely with Tailwind CSS, that includes over 120 coded CSS components and pre-built pages for marketing, authentication, and admin dashboards.

What is Notus NextJS?

Notus NextJS is a free, MIT-licensed UI kit and admin dashboard template created by Creative Tim for the Next.js framework. It takes a set of pre-written CSS and React components and combines them into complete page layouts, producing a startable Next.js application with presentation, admin, and authentication pages. The template is version 1.1.0, uses Tailwind CSS for all styling, and includes a tailwind.config.js and source files under /components, /layouts, /pages, and /assets.

Key Features

Here are the concrete features that ship with Notus NextJS, based on the project README.

• 120+ CSS components — Alerts, buttons, inputs, dropdowns, modals, navbars, tabs, tooltips, and popovers are provided as Tailwind-styled elements with multiple color and state variations.
• 18 dynamic Next.js components — Ready-made React components include Alerts, Dropdowns, Menus, Modals, Navbars, Popovers, Tabs, and Tooltips, implemented with Popper for positioning.
• Pre-built pages — The template ships with presentation, landing, profile, admin dashboard, settings, tables, maps, login, register, and 404 pages under the pages directory.
• Admin and auth layouts — Dedicated layout components (Admin.js and Auth.js) provide sidebar, navbar, footer, and header structures for dashboard and login/register screens.
• Tailwind CSS compile workflow — Styling is concentrated in src/assets/styles/tailwind.css; adding a new utility class requires running npm run build:tailwind to regenerate the file.
• MIT license — Free to use, modify, and distribute for personal or commercial projects without per-seat fees.
• Cross-framework versions — The same Notus design is separately available for Angular, React, Svelte, Vue, and plain JavaScript/HTML, allowing a consistent look across different stacks.
• One-click deploy — A deploy button in the README lets you launch the template on Genezio directly from the GitHub repository.

Who should use Notus NextJS?

The template fits several development scenarios, each with a specific task you can complete using the included components.

• Next.js developers — Use the ready-made components and layouts to quickly scaffold a new front end, then replace the demo content with your own application data.
• Product teams and startups — Ship a landing page plus an admin dashboard with authentication screens in one codebase, using the included tables, maps, and settings pages as starting points.
• Freelancers and agencies — Reuse the 120+ components and pre-built pages across multiple client projects to shorten delivery time for dashboard and marketing sites.
• Developers learning Tailwind CSS — Study the component implementations and the tailwind.config.js to see how utility classes produce finished UI elements.

What can you do with Notus NextJS?

Here are the ways the pre-built pages and components are meant to be used.

• Launch a marketing site — Publish the included landing page as a public home page, link it to the login and register pages for user onboarding, and keep the footer and navbar from the index page.
• Build an admin dashboard — Combine the card, table, and chart components (CardBarChart, CardLineChart, CardPageVisits, CardSocialTraffic, CardTable) into a dashboard layout with sidebar and top navbar.
• Prototype authentication flows — Use the login and register pages inside the Auth layout to test sign-up and sign-in UX before connecting a backend like Auth0 or NextAuth.
• Create an internal tool UI — Start from the settings, tables, and maps pages to build a back-office interface, adapting the CardSettings and MapExample components to your data.

How does Notus NextJS work?

Notus NextJS runs as a standard Next.js application. After downloading and unzipping the project, run npm install (or npm run install:clean on Linux), then run npm run build:tailwind to compile the stylesheet and npm run dev to start the development server at localhost:3000. Whenever you introduce a Tailwind class that isn't already defined in src/assets/styles/tailwind.css, rerun npm run build:tailwind so the new class gets generated.

Pricing

Notus NextJS is free and open source under the MIT license. There are no paid tiers or subscription costs associated with the template itself, and the full source code is available from the Creative Tim product page and GitHub repository.

FAQ

Here are answers to common questions about using Notus NextJS.

Is Notus NextJS free?

Yes, Notus NextJS is completely free and licensed under MIT. You can use it in personal and commercial projects, modify the code, and redistribute it without paying Creative Tim or purchasing a license.

What is the difference between Notus NextJS and the other Notus versions?

The design and components are identical across versions, but the code is implemented for different frameworks. Notus NextJS uses React and Next.js concepts like pages, layouts, and React components, while the Angular, Vue, Svelte, and plain HTML versions follow their own conventions.

How many components are included?

The template includes over 120 CSS components and 18 dynamic Next.js components. The CSS components cover basic UI elements like alerts, buttons, and inputs, while the dynamic components add interactivity such as dropdowns, modals, popovers, and tooltips.

Which Node.js version is required?

The README asks you to install the Node.js LTS version from the official Node.js website. The exact version is not pinned, but LTS is recommended for running the Next.js development server and build commands.

Does the template include a map integration?

The admin Maps page includes a MapExample component, but the template does not list a specific map provider. The component structure is there for you to plug in a mapping library such as Google Maps or Leaflet.