Coder Social home page Coder Social logo

creativetimofficial / notus-nextjs Goto Github PK

View Code? Open in Web Editor NEW
1.2K 25.0 1.6K 7.12 MB

Notus NextJS: Free Tailwind CSS UI Kit and Admin

Home Page: https://www.creative-tim.com/product/notus-nextjs

License: MIT License

CSS 24.31% JavaScript 75.69%
tailwindcss tailwind tailwind-css nextjs react reactjs tailwind-css-template tailwindcss-extension nextjs-template react-template

notus-nextjs's Introduction

Notus NextJS Tweet

version license GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Notus NextJS

A beautiful UI Kit and Admin for Tailwind CSS and NextJS.

Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level.

Notus NextJS is Free and Open Source. It features multiple HTML and NextJS elements and it comes with dynamic components for NextJS.

It is based on Tailwind Starter Kit by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard.

Speed up your web development with a beautiful product made by Creative Tim . If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites.

Get Started

  • Install NodeJS LTS version from NodeJs Official Page
  • Download the product on this page
  • Unzip the downloaded file to a folder in your computer
  • Open Terminal
  • Go to your file project (where you’ve unzipped the product)
  • (If you are on a linux based terminal) Simply run npm run install:clean
  • (If not) Run in terminal npm install
  • (If not) Run in terminal npm run build:tailwind (each time you add a new class, a class that does not exist in src/assets/styles/tailwind.css, you will need to run this command)
  • (If not) Run in terminal npm run dev
  • Navigate to https://localhost:3000
  • Check more about Tailwind CSS

Pages

If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

Here are all the page from the project:

Fully Coded Components

Notus NextJS is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes (NOTE: each time you add a new class, a class that does not exist in src/assets/styles/tailwind.css, you will need to compile again tailwind).

You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.

CSS Components

Notus NextJS comes with 120 Fully Coded CSS elements, such as Alerts, Buttons, Inputs and many more.

Please check all of them here.

NextJS Components

We also feature the following 18 dynamic components:

Table of Contents

Versions

Angular JavaScript / HTML NextJS React Svelte VueJS
Notus Angular Notus JS Notus NextJS Notus React Notus Svelte Vue Notus

Documentation

The documentation for the Notus NextJS is hosted at our website.

Quick start

Files and Folder

This is the project structure that you will get upon the download:

notus-nextjs
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── assets
│   ├── img
│   │   ├── brand
│   │   │   └── favicon.ico
│   │   ├── github.svg
│   │   └── google.svg
│   └── styles
│       ├── index.css
│       └── tailwind.css
├── components
│   ├── Cards
│   │   ├── CardBarChart.js
│   │   ├── CardLineChart.js
│   │   ├── CardPageVisits.js
│   │   ├── CardProfile.js
│   │   ├── CardSettings.js
│   │   ├── CardSocialTraffic.js
│   │   ├── CardStats.js
│   │   └── CardTable.js
│   ├── Dropdowns
│   │   ├── IndexDropdown.js
│   │   ├── NotificationDropdown.js
│   │   ├── PagesDropdown.js
│   │   ├── TableDropdown.js
│   │   └── UserDropdown.js
│   ├── Footers
│   │   ├── Footer.js
│   │   ├── FooterAdmin.js
│   │   └── FooterSmall.js
│   ├── Headers
│   │   └── HeaderStats.js
│   ├── Maps
│   │   └── MapExample.js
│   ├── Navbars
│   │   ├── AdminNavbar.js
│   │   ├── AuthNavbar.js
│   │   └── IndexNavbar.js
│   ├── PageChange
│   │   └── PageChange.js
│   └── Sidebar
│       └── Sidebar.js
├── layouts
│   ├── Admin.js
│   └── Auth.js
├── next.config.js
├── package.json
├── pages
│   ├── 404.js
│   ├── _app.js
│   ├── _document.js
│   ├── _error.js
│   ├── admin
│   │   ├── dashboard.js
│   │   ├── maps.js
│   │   ├── settings.js
│   │   └── tables.js
│   ├── auth
│   │   ├── login.js
│   │   └── register.js
│   ├── index.js
│   ├── landing.js
│   └── profile.js
└── tailwind.config.js

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome Firefox Edge Safari Opera

Reporting Issues

We use GitHub Issues as the official bug tracker for the Notus NextJS. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Notus NextJS. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/creativetimofficial/

Resources

notus-nextjs's People

Contributors

einazare avatar marqbeniamin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

notus-nextjs's Issues

[Bug] npm install fails

Version

1.00

Reproduction link

https://github.com/brilang/fvcb4

Operating System

Windows 10 Home 64-bit

Device

Dell Gaming PC, Intel i7-10700F, 32GB memory

Browser & Version

n/a

Steps to reproduce

  1. Download notus-nextjs-master.zip from the Notus NextJS page
  2. Extract to directory (in my case, C:\Users\brila\Projects\fvcb4)
  3. Run npm install in project directory
  4. Read error messages

What is expected?

npm install should succeed

What is actually happening?

Errors are being generated


Solution

Additional comments

Contents of eresolve-report.txt follows:

npm resolution error report

2021-03-03T02:31:19.430Z

Found: [email protected]
node_modules/typescript
optional typescript@"4.0.3" from the root project

Could not resolve dependency:
peerOptional typescript@"^3.2.1" from [email protected]
node_modules/react-scripts
react-scripts@"3.4.3" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
"code": "ERESOLVE",
"current": {
"name": "typescript",
"version": "4.0.3",
"location": "node_modules/typescript",
"dependents": [
{
"type": "optional",
"name": "typescript",
"spec": "4.0.3",
"from": {
"location": "C:\Users\brila\Projects\fvcb4"
}
}
]
},
"edge": {
"type": "peerOptional",
"name": "typescript",
"spec": "^3.2.1",
"error": "INVALID",
"from": {
"name": "react-scripts",
"version": "3.4.3",
"location": "node_modules/react-scripts",
"dependents": [
{
"type": "prod",
"name": "react-scripts",
"spec": "3.4.3",
"from": {
"location": "C:\Users\brila\Projects\fvcb4"
}
}
]
}
},
"peerConflict": null,
"strictPeerDeps": false,
"force": false
}

BUG @next/postcss

I've followed the instructions in the readme but I'm getting an error like this, what happened?

yarn run v1.22.11
$ tailwind build styles/index.css -o styles/tailwind.css

   tailwindcss 2.0.4

   🚀 Building: styles/index.css
(node:2028) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at C:\Users\xxx\tmp\notus-nextjs-main\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

Bug for build the project

Once I just want to build the project : next build
I had encounter issue:
Build error occurred
Error: > Build failed because of webpack errors
at build (C:\Users\TESS\Documents\GitHub\01car.fr\front\node_modules\next\dist\build\index.js:15:918)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)

I had also install webpack
But still issue still occure

The package json had no change
Either with nex.config.js

Any fix could be possible ?
tks

npm run dev error : ERR_PACKAGE_PATH_NOT_EXPORTED

Version
[email protected]

Reproduction link
https://github.com/creativetimofficial/notus-nextjs

Operating System
macOS Monterey

Device
MacBook Prom APPLE M1 Pro

Browser & Version
NA

Steps to reproduce

  1. Go to https://github.com/creativetimofficial/notus-nextjs
  2. Download code
  3. unzip
  4. npm install
  5. npm run dev -> error

What is expected?
run project

What is actually happening?
error when "npm run dev"

node:internal/modules/cjs/loader:535
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/node' is not defined by "exports" in /Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/postcss/package.json
at new NodeError (node:internal/errors:393:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
at resolveExports (node:internal/modules/cjs/loader:529:36)
at Module._findPath (node:internal/modules/cjs/loader:569:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (/Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/tailwindcss/lib/util/processPlugins.js:12:36) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

스크린샷 2022-11-30 오후 6 59 51

스크린샷 2022-11-30 오후 7 00 22

npm Install Fail [Bug]

trying to install npm i always got this chach log error message

6338 verbose stack at JSON.parse ()
6338 verbose stack at parseJson (C:\Program Files\nodejs\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
6338 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50
6338 verbose stack at runMicrotasks ()
6338 verbose stack at processTicksAndRejections (internal/process/task_queues.js:97:5)
6339 verbose cwd C:\Users\Adam\Desktop\New folder (6)\notus-nextjs
6340 verbose Windows_NT 10.0.18362
6341 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
6342 verbose node v12.18.2
6343 verbose npm v6.14.5
6344 error Unexpected end of JSON input while parsing near '...et-jest-23.0.0-alpha.'
6345 verbose exit [ 1, true ]

hope anyone know what's wrong?

[Bug] Variants are not working.

Version

Latest

Reproduction link

Operating System

mac

Device

mac

Browser & Version

latest chrome

Steps to reproduce

<button. disabled className="disabled:bg-blueGray-600 bg-pink-500" /button>
above disabled class is not working with the existing variant configuration below:
variants: [
"responsive",
"group-hover",
"focus-within",
"first",
"last",
"odd",
"even",
"hover",
"focus",
"active",
"visited",
"disabled",
],

also tested with following configuration still not working.
variants: {
extend: {
backgroundColor: ["disabled", "active"],
// ...
borderColor: ["focus-visible", "first"],
// ...
textColor: ["visited"],
},
},

What is expected?

disabled:bg-pink-500 should set background color as pink when disable attribute of the button is set.

What is actually happening?

Nothing is happening.


Solution

No solution yet.

Additional comments

[Bug] npm run dev error : ERR_PACKAGE_PATH_NOT_EXPORTED

Version

[email protected]

Reproduction link

https://github.com/creativetimofficial/notus-nextjs

Operating System

macOS Monterey

Device

Macbook pro 16

Browser & Version

Steps to reproduce

1.Go to https://github.com/creativetimofficial/notus-nextjs
2.Download code
3.unzip
4.npm install
5.npm run dev -> error

What is expected?

Run

What is actually happening?

error when "npm run dev"

node:internal/modules/cjs/loader:535
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/node' is not defined by "exports" in /Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/postcss/package.json
at new NodeError (node:internal/errors:393:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
at resolveExports (node:internal/modules/cjs/loader:529:36)
at Module._findPath (node:internal/modules/cjs/loader:569:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (/Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/tailwindcss/lib/util/processPlugins.js:12:36) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}


Solution

Additional comments

I use node LTS18.12.1
And NVM 8.19.2 version

[Bug] Uncaught Runtime error

Version

[email protected]

Reproduction link

https://demos.creative-tim.com/notus-nextjs?_ga=2.261760520.424340754.1610867537-881030562.1610431277

Operating System

Linux mint

Device

DELL PRECISION T5500

Browser & Version

Version 86.0.4240.75 (Official Build) (64-bit) Google chrome

Steps to reproduce

npm run dev ,
inspect element to view responsive index page
reload the mobile responsive page

nextjs throws you a uncaught runtime error

What is expected?

No runtime error

What is actually happening?

Unhandled Runtime Error
ChunkLoadError: Loading chunk 0 failed.
(error: http://localhost:3000/_next/static/chunks/0.js)
Source
../../client/next-dev.js (16:0) @ Object.eval

14 | // The runtimeChunk can't hot reload itself currently to correct it when adding pages using on-demand-entries
15 | // eslint-disable-next-line no-unused-expressions

16 | REPLACE_NOOP_IMPORT
17 |
18 | // Support EventSource on Internet Explorer 11
19 | if (!window.EventSource) {

Call Stack
eval
webpack-internal:///./node_modules/next/dist/client/next-dev.js (155:30)
Object../node_modules/next/dist/client/next-dev.js
file:///home/torch/Desktop/Fresh/notuspub/.next/static/chunks/main.js (737:1)
webpack_require
/_next/static/chunks/webpack.js (873:31)
checkDeferredModules
file:///home/torch/Desktop/Fresh/notuspub/.next/static/chunks/webpack.js (46:23)
webpackJsonpCallback
/_next/static/chunks/webpack.js (33:19)

file:///home/torch/Desktop/Fresh/notuspub/.next/static/chunks/webpack.js (1015:54)

/_next/static/chunks/webpack.js (1023:10)


Solution

Additional comments

[Bug] @next/postcss

Version

main

Reproduction link

Operating System

Windows

Device

ROG

Browser & Version

Chrome

Steps to reproduce

What is expected?

running as a normal

What is actually happening?

I've followed the instructions in the readme but I'm getting an error like this, what happened?


Solution

Additional comments

TableDropdown.js is a copy of NotificationDropdown.js

Version

1.1.0

Reproduction link

https://github.com/creativetimofficial/notus-nextjs/blob/main/components/Dropdowns/TableDropdown.js

Operating System

NA

Device

NA

Browser & Version

NA

Steps to reproduce

  1. Go to: https://github.com/creativetimofficial/notus-nextjs/blob/main/components/Dropdowns/TableDropdown.js
  2. Notice name of file is TableDropdown.js
  3. Notice name of const is NotificationDropdown

This will give a compilation error

What is expected?

A proper TableDropdown

What is actually happening?

Getting a NotificationDropdown


Solution

Additional comments

[Bug] npm run dev error : ERR_PACKAGE_PATH_NOT_EXPORTED

Version

[email protected]

Reproduction link

https://github.com/creativetimofficial/notus-nextjs

Operating System

macOS Monterey

Device

MacBook Prom APPLE M1 Pro

Browser & Version

chrome & 107.0.0.1

Steps to reproduce

  1. Go to https://github.com/creativetimofficial/notus-nextjs
  2. Download code
  3. unzip
  4. npm install
  5. npm run dev -> error

What is expected?

run project

What is actually happening?

error when "npm run dev"

node:internal/modules/cjs/loader:535
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/node' is not defined by "exports" in /Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/postcss/package.json
at new NodeError (node:internal/errors:393:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:358:9)
at packageExportsResolve (node:internal/modules/esm/resolve:668:3)
at resolveExports (node:internal/modules/cjs/loader:529:36)
at Module._findPath (node:internal/modules/cjs/loader:569:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:981:27)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object. (/Users/seungyuncho/Downloads/notus-nextjs-main/node_modules/tailwindcss/lib/util/processPlugins.js:12:36) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
스크린샷 2022-11-30 오후 7 00 22
스크린샷 2022-11-30 오후 6 59 51


Solution

Additional comments

[Bug] Auth0 Integration Doesn't Work

Version

1.10

Reproduction link

https://auth0.com/docs/quickstart/webapp/nextjs

Operating System

Windows

Device

PC

Browser & Version

Chrome Version 89.0.4389.114 (Official Build) (64-bit)

Steps to reproduce

This requires Auth0 setup to reproduce, but just following the setup guide step by step, then attempting to login reproduces the issue

What is expected?

I should be redirected to the Auth0 login page, then redirected back once authenticated

What is actually happening?

The app just reloads to the home page


Solution

Additional comments

[Bug] Bug for build the project

Version

1.0.0

Reproduction link

https://github.com/creativetimofficial/notus-nextjs?ref=twnjs-index

Operating System

node js

Device

desktop

Browser & Version

chrome 86.0.4240.75

Steps to reproduce

  1. npm install ( install the project from https://github.com/creativetimofficial/notus-nextjs)
  2. npm run dev ( développe the project )
  3. npm run build

What is expected?

Build in .next file

What is actually happening?

Build error occurred
Error: > Build failed because of webpack errors
at build (C:\Users\TESS\Documents\GitHub\01car.fr\front\node_modules\next\dist\build\index.js:15:918)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:93:5)


Solution

Had install webpack, no work
change next.config.js
module.exports = {
distDir: 'build',
}

Still got the same error

Additional comments

Might be had to change the webpack version ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.