Panely React is a multipurpose admin dashboard template based on React NextJS and Bootstrap. This template has a huge collection of essential and reusable UI components for you to design interfaces and powerful web applications. It is a fully clean and responsive dashboard template design for all types of devices and works on all major web browsers.
We built this template to be easy to customize. Every widgets and components are modular, reusable and customizable. Out of the box, this template is built-in with Redux and Redux Saga. This template also integrates with Firebase for authentication. All styles are fully developed with SCSS, you can easily change this template style.
- First, you must have Node.js installed on your computer
- Extract the downloaded package from the marketplace
- Start the console and go to
/template/directory from the package that was extracted
- Install all dependencies needed by running
- This template requires Firebase for authentication, you must set the Firebase configuration. Get your Firebase configuration on your Firebase console page at Project Settings -> General -> Your Apps and copy the configuration and replace into
- After that, you must set Firebase Admin key. Go to Project Settings -> Service Accounts on Firebase console page and generate the key and replace into
- Start the development server by running
yarn devand keep the console open and open the link that displayed on the console. Press
CTRL+Cto stop the server
Panely React comes with a simple and organized directory structure for easy to understand and maintainability. Look at the treeview below to find the basic template directory structure.
- public - contains static assets
- src - contains source codes
- components - contains modular components
- config - contains configuration file
- modules - contains library codes
- pages - contains page components
- store - contains all redux files
- styles - contains all stylesheet files
- jsconfig.json - compiler configuration
- package.json - general package information
This template uses default NextJS build tool without custom configuration. Below are all the build tool commands.
|Start development server|
|Build codes for production purpose|
|Serve the production codes|
/template/src/pages/ directory. Each page is associated with a route based on its file name.
Example: If you create
/template/src/pages/about.js that exports a React component like below, it will be accessible at
For more information and examples look at the official documentation.
Static file serving
NextJS can serve static files, like images, under a folder called
public in the root directory. Files inside
public can then be referenced by your code starting from the base URL (
For example, if you add an image to
/template/public/me.png, you can access it in
/me.png url. This folder is also useful for
favicon.ico, Google Site Verification, and any other static files (including
For more references look at the documentation
You can wrap the page component with
withLayout function to apply the layout component. This template provides 2 types of layout:
blank layouts. The blank layout will remove all navigation components. To change layout type, you can use the second parameter of the wrapper function
To configure the layout components you can set the configuration in
For customizing the side navigation menu, you can change the configuration in
/template/src/config/menu.config.jsx. Look at the codes to learn how the navigation menu is working.
This template uses Firebase for authenticating and you must set Firebase configuration. Wrap your page component with
withAuth to make protected page that can access only for authorized users. If the users are not authorized, the page will redirect to login page.
By default, this template comes with Redux and Redux Saga. You can find all redux source codes in
/template/src/store/, that folder contains all reducers, actions and saga middlewares.
This template uses SCSS for handling the CSS efficiently. You can find all SCSS files in
/template/src/styles/. We remove several Bootstrap components because we replace them with our custom components.
You can easily customize the color palette and other options by editing the variables in