Start your development with a Dashboard for NextJ, Bootstrap, React and Reactstrap. It is open source, free and it features many components that can help you create amazing websites.
This project comes with a
Authentication
&Dark-Mode
enhancements - Provided by Admin Dashboards service.
product page
LIVE demo
To run the project on your device, make sure you have node environment(v14+) installed on it. Clone the project via Git CLI or download the zip.
$ npm i
$ npm run dev
After that you can visit the demo at the mentioned URL in your console(usually it is http://localhost:3000).
Authentication is now available via Github
and Google
OAuth provided by next-auth
.
for each provider in [...nextauth].js
a client id and a client secret are needed. these secrets are generated by the oauth provider. if you are running the project locally, then you have to create a .env
file in the project root and add your secrets to it as mentioned below:
GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"
GOOGLE_CLIENT_SECRET="YOUR_GOOGLE_CLIENT_SECRET"
GITHUB_CLIENT_ID="YOUR_GITHUB_CLIENT_ID"
GITHUB_CLIENT_SECRET="YOUR_GITHUB_CLIENT_SECRET"
alternativley, if you are deploying the project, you should add the mentioned key value pairs as environment variables to your depolyment settings. in addition, there is one more environment variable to add here:
SECRET="WHAT_EVER"
Note: The OAUth testing in local environments requires an HTTPS connection
More Info: https://github.com/vercel/next.js/discussions/10935#discussioncomment-2236301
https://github.com/cameronhunter/local-ssl-proxy
the easiest way to deploy a next project including this one, is using vercel. vercel is a powerfull tool for deploying next projects created by the very same team who created nextjs. create a vercel account and import your github repository. choose a repo to start with and vercel will do the rest.
This demo contains a feature to change pages' theme. dark and light themes are available.
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.
Learn how to use this starter by accessing Next JS Argon Dashboard - Documentation.
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
NextJS Argon Dashboard - Provided by Admin Dashboards