Coder Social home page Coder Social logo

nextjs-argon-dashboard's Introduction

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

Product Image

Start your development with a Dashboard for NextJS, Bootstrap 4, React and Reactstrap. It is open source, free and it features many components that can help you create amazing websites.

Fully Coded Components

NextJS Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in color, that you can easily modify using SASS files. You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Dashboard is coming with pre-built 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.

Complex Documentation

Each element is well presented in a very complex documentation. You can read more about the idea behind this dashboard here. You can check the components here and the foundation here.

Example 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.

Table of Contents

Versions

NextJS ASP.NET NodeJS React Angular
Argon Dashboard Asp.net Argon Dashboard Asp.net Argon Dashboard Nodejs Argon Dashboard React Argon Dashboard Angular
React Native VueJS Laravel Bootstrap BootstrapVue Django
Argon React Native Vue Argon Dashboard Argon Dashboard Laravel Argon Dashboard BootstrapVue Argon Dashboard Argon Dashboard Django

Demo

View More.

Quick start

Documentation

The documentation for the Material Kit is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

NextJS Argon Dashboard
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── Documentation
│   └── documentation.html
├── assets
│   ├── css
│   │   ├── nextjs-argon-dashboard.css
│   │   ├── nextjs-argon-dashboard.css.map
│   │   └── nextjs-argon-dashboard.min.css
│   ├── fonts
│   ├── img
│   │   ├── brand
│   │   ├── icons
│   │   │   └── common
│   │   └── theme
│   ├── plugins
│   │   └── nucleo
│   │       ├── css
│   │       │   ├── nucleo-svg.css
│   │       │   └── nucleo.css
│   │       └── fonts
│   └── scss
│       ├── argon-dashboard
│       │   ├── bootstrap
│       │   │   ├── mixins
│       │   │   └── utilities
│       │   ├── custom
│       │   │   ├── alerts
│       │   │   ├── avatars
│       │   │   ├── badges
│       │   │   ├── buttons
│       │   │   ├── cards
│       │   │   ├── charts
│       │   │   ├── close
│       │   │   ├── custom-forms
│       │   │   ├── dropdowns
│       │   │   ├── footers
│       │   │   ├── forms
│       │   │   ├── headers
│       │   │   ├── icons
│       │   │   ├── list-groups
│       │   │   ├── maps
│       │   │   ├── masks
│       │   │   ├── mixins
│       │   │   ├── modals
│       │   │   ├── navbars
│       │   │   ├── navs
│       │   │   ├── paginations
│       │   │   ├── popovers
│       │   │   ├── progresses
│       │   │   ├── separators
│       │   │   ├── tables
│       │   │   ├── type
│       │   │   ├── utilities
│       │   │   └── vendors
│       │   └── docs
│       ├── nextjs-argon-dashboard.scss
│       └── react
│           ├── bootstrap
│           ├── plugins
│           └── react-differences.scss
├── components
│   ├── Footers
│   │   ├── AdminFooter.js
│   │   └── AuthFooter.js
│   ├── Headers
│   │   ├── Header.js
│   │   └── UserHeader.js
│   ├── Navbars
│   │   ├── AdminNavbar.js
│   │   └── AuthNavbar.js
│   ├── PageChange
│   │   └── PageChange.js
│   └── Sidebar
│       └── Sidebar.js
├── layouts
│   ├── Admin.js
│   └── Auth.js
├── pages
│   ├── 404.js
│   ├── _app.js
│   ├── _document.js
│   ├── _error.js
│   ├── admin
│   │   ├── dashboard.js
│   │   ├── icons.js
│   │   ├── maps.js
│   │   ├── profile.js
│   │   └── tables.js
│   ├── auth
│   │   ├── login.js
│   │   └── register.js
│   └── index.js
├── variables
│   └── charts.js
├── routes.js
├── next.config.js
└── package.json

Browser Support

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

Resources

PRO Versions

NextJS NodeJS React Angular VueJS
NextJS Argon Dashboard PRO Argon Dashboard PRO Nodejs Argon Dashboard PRO React Argon Dashboard PRO Angular Vue Argon Dashboard PRO
React Native Laravel Bootstrap BootstrapVue Nuxt Svelte
Argon PRO React Native Argon Dashboard PRO Laravel Argon Dashboard PRO BootstrapVue Argon Dashboard PRO Nuxt Argon Dashboard PRO Nuxt Argon Dashboard PRO

Kit Versions

FREE Kit Versions

HTML Angular React VueJS
Argon Design System PRO HTML Argon Design System PRO Angular Argon Design System PRO React Argon Design System PRO React

PRO Kit Versions

HTML Angular React VueJS
Argon Design System PRO HTML Argon Design System PRO Angular Argon Design System PRO React Argon Design System PRO React

Reporting Issues

We use GitHub Issues as the official bug tracker for the Material Kit. 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 Material Kit. 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?ref=creativetim

Facebook: https://www.facebook.com/CreativeTim?ref=creativetim

Dribbble: https://dribbble.com/creativetim?ref=creativetim

Instagram: https://www.instagram.com/CreativeTimOfficial?ref=creativetim

nextjs-argon-dashboard'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

nextjs-argon-dashboard's Issues

[Bug] Spelling Error

Version

recent

Reproduction link

https://www.creative-tim.com/learning-lab/nextjs/routing-system/argon-dashboard

Operating System

Windows

Device

Laptop

Browser & Version

Google

Steps to reproduce

Read the document
https://www.creative-tim.com/learning-lab/nextjs/routing-system/argon-dashboard

What is expected?

  1. path of the layout in which the View component you want to be rendered - in our template demo you only have two options

2.used to tell our demo app components this is a collapsible group

What is actually happening?

  1. path of the layout in which the View component you want to be rendered - in our template demo you only have to options.

2.used to tell our deom app components this is a collapsible group


Solution

The spelling issue is fixed on What is expected section.

Additional comments

[Bug] Module not found: Can't resolve 'nextjs-argon-dashboard'

Version

1.1.0

Reproduction link

https://www.npmjs.com/package/nextjs-argon-dashboard

Operating System

OSX

Device

MAC

Browser & Version

Any

Steps to reproduce

  1. yarn create next-app
  2. cd [YOUR_APP]
  3. yarn add nextjs-argon-dashboard
  4. import "nextjs-argon-dashboard" or import * from "nextjs-argon-dashboard" or ...

Then the error appear Module not found: Can't resolve 'nextjs-argon-dashboard'

What is expected?

To found the module in my packages

What is actually happening?

It does not found the module


Solution

Additional comments

NavLink inside of Link?

Just bought the full version of this. All is well, but there's something in the code that I didn't understand.

<Link href="/admin/dashboard">

Curious why there is a NavLink inside of a Link. First noticed because on hover in Chrome, it shows the NavLink url, but actually navigates to the Link url. Kind of confusing.

It would be ideal to just have a single NavLink (or Link). I presume this was done intentionally, but I can't seem to find out why.

[Bug] Unable to resolve dependency tree

Version

1.1.0

Reproduction link

https://github.com/creativetimofficial/nextjs-argon-dashboard

Operating System

Mac OS Ventura 13.4

Device

Macbook Air M1

Browser & Version

114.0.5735.198 (Official Build) (arm64)

Steps to reproduce

  1. Download the repository
  2. Run npm install
  3. See error logs

What is expected?

Is expected that the dependencies are installed without any errors or conflicts.

What is actually happening?

NPM is unable to finish the installation. Here's the logs:

~/nextjs-argon-dashboard $ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR!   react-datetime@"3.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /***/***/.npm/_logs/2023-07-14T14_30_36_855Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /***/***/.npm/_logs/2023-07-14T14_30_36_855Z-debug-0.log

Solution

Additional comments

[Bug] Unable to resolve dependency tree

Version

1.1.0

Reproduction link

https://github.com/creativetimofficial/nextjs-argon-dashboard

Operating System

Mac OS VEntura 13.4

Device

Macbook Air M1

Browser & Version

114.0.5735.198 (Official Build) (arm64)

Steps to reproduce

  1. Download the repository
  2. Run npm install
  3. See error logs

What is expected?

Is expected that the dependencies are installed without any errors or conflicts.

What is actually happening?

NPM is unable to finish the installation. Here's the logs:

~/nextjs-argon-dashboard $ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR!   react-datetime@"3.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /***/***/.npm/_logs/2023-07-14T14_30_36_855Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /***/***/.npm/_logs/2023-07-14T14_30_36_855Z-debug-0.log

[Bug] NavLink inside of Link?

Version

1.1.0

Reproduction link

<Link href="/admin/dashboard">

Operating System

OS X

Device

Macbook Pro 13"

Browser & Version

Chrome

Steps to reproduce

  1. When viewing the demo site, the links in the header have another link inside of them
  2. You can see this in the code here
    <Link href="/admin/dashboard">
    .

What is expected?

NavLinks are not nested inside of duplicate Links

What is actually happening?

NavLinks are a child of Link, which is like having a html anchor, with an html anchor as the child.


Solution

Choose either Link or NavLink to prevent confusion, and remove the nested duplication of links.

Additional comments

This also has an effect outside of just the code maintainability. If the Link and NavLink have different hrefs (like they do in the demo), hovering over the link shows one url, but clicking on the link goes to another. Kind of not good for human interface guidelines.

[Bug] Error: Can't resolve './img/theme/img-1-1000x600.jpg'

Version

1.1.0

Reproduction link

https://github.com/creativetimofficial/nextjs-argon-dashboard/blob/master/assets/scss/react/_page-transition.scss#L16

Operating System

MacOS

Device

Macbook Pro

Browser & Version

None

Steps to reproduce

  1. Yarn add nextjs-argon-dashboard
  2. yarn dev

What is expected?

No compile error

What is actually happening?

I got this error.
Error: Can't resolve './img/theme/img-1-1000x600.jpg' in ' .../node_modules/nextjs-argon-dashboard/assets/scss'
Screen Shot 2021-02-17 at 16 56 05


Solution

It seems the image path is incorrect.

Additional comments

Spelling Error

(path of the layout in which the View component you want to be rendered - in our template demo you only have to options: /admin and /auth - but due to this routing system you can add more, for example

(used to tell our deom app components this is a collapsible group

[Bug] npm install fails

Version

1.1.0

Reproduction link

n/a

Operating System

Windows 10 Home 64-bit

Device

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

Browser & Version

n/a

Steps to reproduce

  1. Go to downloads section on creative tim website (be sure to be logged into your account)
  2. Press the download button near NextJS Argon Dashboard (FREE) product (this will download onto your computer a zip file)
  3. Unzip the downloaded file to a folder in your computer
  4. Open Terminal
  5. Go to your file project (where you’ve unzipped the product)
  6. Run in terminal npm install

What is expected?

npm install to work properly

What is actually happening?

npm fails with the following results

C:\Users\brila\Projects\ArgonTemplate>npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.0" from [email protected]
npm ERR! node_modules/react-datetime
npm ERR! react-datetime@"3.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\brila\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\brila\AppData\Local\npm-cache_logs\2021-03-20T01_31_59_858Z-debug.log


Solution

Possibly the same solution to Issue # 8 in the Notus NextJS project as the error messages are similar.

Additional comments

I have reported the same problem from my work Github account for the PRO version of Argon with no response in 8 days. My company purchased a license for the product.

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.