# Table of Contents - [Introduction | Flat Able - React](#introduction-flat-able-react) - [Installation | Flat Able - React](#installation-flat-able-react) - [Overview | NextJS | Able Pro](#overview-nextjs-able-pro) - [Getting Started | Flat Able - React](#getting-started-flat-able-react) - [Prerequisites | Flat Able - React](#prerequisites-flat-able-react) - [Routing | Flat Able - React](#routing-flat-able-react) - [File Structure | Flat Able - React](#file-structure-flat-able-react) - [Template Config | Flat Able - React](#template-config-flat-able-react) - [Code Splitting | Flat Able - React](#code-splitting-flat-able-react) - [Changelog | Flat Able - React](#changelog-flat-able-react) - [Layout Option | Flat Able - React](#layout-option-flat-able-react) - [Support | Flat Able - React](#support-flat-able-react) - [Pre-requisites | NextJS | Able Pro](#pre-requisites-nextjs-able-pro) - [Roadmap | NextJS | Able Pro](#roadmap-nextjs-able-pro) - [Quick Start | NextJS | Able Pro](#quick-start-nextjs-able-pro) - [How to | NextJS | Able Pro](#how-to-nextjs-able-pro) - [Integration | NextJS | Able Pro](#integration-nextjs-able-pro) - [Able Pro - Overview | Able Pro](#able-pro-overview-able-pro) - [Theme/Style Configuration | NextJS | Able Pro](#theme-style-configuration-nextjs-able-pro) - [Folder Structure | NextJS | Able Pro](#folder-structure-nextjs-able-pro) - [Authentication | NextJS | Able Pro](#authentication-nextjs-able-pro) - [State Management | NextJS | Able Pro](#state-management-nextjs-able-pro) - [Axios API Calls | NextJS | Able Pro](#axios-api-calls-nextjs-able-pro) - [Internationalization | NextJS | Able Pro](#internationalization-nextjs-able-pro) - [Color Presets | NextJS | Able Pro](#color-presets-nextjs-able-pro) - [Project Configuration | NextJS | Able Pro](#project-configuration-nextjs-able-pro) - [Figma | NextJS | Able Pro](#figma-nextjs-able-pro) - [Support | NextJS | Able Pro](#support-nextjs-able-pro) - [Changelog | NextJS | Able Pro](#changelog-nextjs-able-pro) - [Dependencies | NextJS | Able Pro](#dependencies-nextjs-able-pro) - [Login as First Page | NextJS | Able Pro](#login-as-first-page-nextjs-able-pro) - [Changelog | Able Pro](#changelog-able-pro) - [RoadMap | Able Pro](#roadmap-able-pro) - [Dashboard as First Page | NextJS | Able Pro](#dashboard-as-first-page-nextjs-able-pro) - [Versioning | Able Pro](#versioning-able-pro) - [Remove menu render from Backend | NextJS | Able Pro](#remove-menu-render-from-backend-nextjs-able-pro) - [Render Menu from the backend | NextJS | Able Pro](#render-menu-from-the-backend-nextjs-able-pro) - [Remove Auth | NextJS | Able Pro](#remove-auth-nextjs-able-pro) - [Seed | NextJS | Able Pro](#seed-nextjs-able-pro) - [Comparison | NextJS | Able Pro](#comparison-nextjs-able-pro) - [Welcome | Bootstrap | Able Pro](#welcome-bootstrap-able-pro) - [Welcome | Tailwind - HTML | Able Pro](#welcome-tailwind-html-able-pro) - [Introduction | CodeIgnitor | Able Pro](#introduction-codeignitor-able-pro) - [Introduction | .Net | Able Pro](#introduction-net-able-pro) - [Introduction | Flask | Able Pro](#introduction-flask-able-pro) - [Introduction | Django | Able Pro](#introduction-django-able-pro) - [Introduction | Angular | Able Pro](#introduction-angular-able-pro) - [Introduction | Nodejs | Able Pro](#introduction-nodejs-able-pro) - [Introduction | sveltekit | Able Pro](#introduction-sveltekit-able-pro) - [Documentation | Vue | Able Pro](#documentation-vue-able-pro) - [Documentation | Vue Laravel | Able Pro](#documentation-vue-laravel-able-pro) - [Overview | React | Able Pro](#overview-react-able-pro) - [Quick Start | Bootstrap | Able Pro](#quick-start-bootstrap-able-pro) - [Quick Start | Tailwind - HTML | Able Pro](#quick-start-tailwind-html-able-pro) - [Structure | Bootstrap | Able Pro](#structure-bootstrap-able-pro) - [Quick Installation | Angular | Able Pro](#quick-installation-angular-able-pro) - [Pre-requisites | Vue | Able Pro](#pre-requisites-vue-able-pro) - [Directory Structure | Angular | Able Pro](#directory-structure-angular-able-pro) - [Getting Started | Flask | Able Pro](#getting-started-flask-able-pro) - [Quick Start | .Net | Able Pro](#quick-start-net-able-pro) - [Structure | Tailwind - HTML | Able Pro](#structure-tailwind-html-able-pro) - [Getting Started | Django | Able Pro](#getting-started-django-able-pro) - [Quick Start | CodeIgnitor | Able Pro](#quick-start-codeignitor-able-pro) - [Quick Start | Vue | Able Pro](#quick-start-vue-able-pro) - [Pre-requisites | React | Able Pro](#pre-requisites-react-able-pro) - [Folder Structure | .Net | Able Pro](#folder-structure-net-able-pro) - [Installation | Vue Laravel | Able Pro](#installation-vue-laravel-able-pro) - [Folder Structure | Flask | Able Pro](#folder-structure-flask-able-pro) - [Changelog | Bootstrap | Able Pro](#changelog-bootstrap-able-pro) - [Dependencies | Bootstrap | Able Pro](#dependencies-bootstrap-able-pro) - [Folder Structure | Django | Able Pro](#folder-structure-django-able-pro) - [RoadMap | Bootstrap | Able Pro](#roadmap-bootstrap-able-pro) - [Directory Structure | Vue | Able Pro](#directory-structure-vue-able-pro) - [Page Structure | Angular | Able Pro](#page-structure-angular-able-pro) - [Directory Structure | Vue Laravel | Able Pro](#directory-structure-vue-laravel-able-pro) - [Getting Started | Nodejs | Able Pro](#getting-started-nodejs-able-pro) - [Changelog | Tailwind - HTML | Able Pro](#changelog-tailwind-html-able-pro) - [📄Page Structure | Django | Able Pro](#-page-structure-django-able-pro) - [📄Page Structure | Flask | Able Pro](#-page-structure-flask-able-pro) - [Getting Started | sveltekit | Able Pro](#getting-started-sveltekit-able-pro) - [Customizer | Bootstrap | Able Pro](#customizer-bootstrap-able-pro) - [RoadMap | Tailwind - HTML | Able Pro](#roadmap-tailwind-html-able-pro) - [Quick Start | React | Able Pro](#quick-start-react-able-pro) - [Theme Configuration | Angular | Able Pro](#theme-configuration-angular-able-pro) - [Customizer | Flask | Able Pro](#customizer-flask-able-pro) - [Folder Structure | sveltekit | Able Pro](#folder-structure-sveltekit-able-pro) - [Folder Structure | Nodejs | Able Pro](#folder-structure-nodejs-able-pro) - [Support | .Net | Able Pro](#support-net-able-pro) - [Support | CodeIgnitor | Able Pro](#support-codeignitor-able-pro) - [Changelog | CodeIgnitor | Able Pro](#changelog-codeignitor-able-pro) - [📄Page Structure | Nodejs | Able Pro](#-page-structure-nodejs-able-pro) - [Support | Flask | Able Pro](#support-flask-able-pro) - [Customizer | Nodejs | Able Pro](#customizer-nodejs-able-pro) - [Support | Django | Able Pro](#support-django-able-pro) - [Page Structure | sveltekit | Able Pro](#page-structure-sveltekit-able-pro) - [Theme Layout | Angular | Able Pro](#theme-layout-angular-able-pro) - [Changelog | .Net | Able Pro](#changelog-net-able-pro) - [Folder Structure | React | Able Pro](#folder-structure-react-able-pro) - [Changelog | Flask | Able Pro](#changelog-flask-able-pro) - [Changelog | Django | Able Pro](#changelog-django-able-pro) - [Theme Structure | Angular | Able Pro](#theme-structure-angular-able-pro) - [Support | Nodejs | Able Pro](#support-nodejs-able-pro) - [Support | sveltekit | Able Pro](#support-sveltekit-able-pro) - [Changelog | Nodejs | Able Pro](#changelog-nodejs-able-pro) - [Changelog | sveltekit | Able Pro](#changelog-sveltekit-able-pro) - [Roadmap | Vue | Able Pro](#roadmap-vue-able-pro) - [Layouts | Vue Laravel | Able Pro](#layouts-vue-laravel-able-pro) - [Dependencies | Tailwind - HTML | Able Pro](#dependencies-tailwind-html-able-pro) - [Plugins | CodeIgnitor | Able Pro](#plugins-codeignitor-able-pro) - [Support | Vue | Able Pro](#support-vue-able-pro) - [Support | Angular | Able Pro](#support-angular-able-pro) - [Perfect Scrollbar | Vue Laravel | Able Pro](#perfect-scrollbar-vue-laravel-able-pro) - [Remove Auth | Vue Laravel | Able Pro](#remove-auth-vue-laravel-able-pro) - [Create a new page | Vue Laravel | Able Pro](#create-a-new-page-vue-laravel-able-pro) - [Customizer | Tailwind - HTML | Able Pro](#customizer-tailwind-html-able-pro) - [Dependencies | Flask | Able Pro](#dependencies-flask-able-pro) - [Roadmap | Vue Laravel | Able Pro](#roadmap-vue-laravel-able-pro) - [FAQ | Vue | Able Pro](#faq-vue-able-pro) - [How to | Vue | Able Pro](#how-to-vue-able-pro) - [Changelog | Vue | Able Pro](#changelog-vue-able-pro) - [Dependencies | Angular | Able Pro](#dependencies-angular-able-pro) - [Changelog | Vue Laravel | Able Pro](#changelog-vue-laravel-able-pro) - [Customizer | CodeIgnitor | Able Pro](#customizer-codeignitor-able-pro) - [Dependencies | .Net | Able Pro](#dependencies-net-able-pro) - [Dependencies | Nodejs | Able Pro](#dependencies-nodejs-able-pro) - [State Management | React | Able Pro](#state-management-react-able-pro) - [Changelog | Angular | Able Pro](#changelog-angular-able-pro) - [Internationalization | React | Able Pro](#internationalization-react-able-pro) - [Routing | React | Able Pro](#routing-react-able-pro) - [Dependencies | Vue | Able Pro](#dependencies-vue-able-pro) - [Axios API Calls | React | Able Pro](#axios-api-calls-react-able-pro) - [Development | Vue | Able Pro](#development-vue-able-pro) - [Dependencies | Django | Able Pro](#dependencies-django-able-pro) - [Color Presets | React | Able Pro](#color-presets-react-able-pro) - [Roadmap | React | Able Pro](#roadmap-react-able-pro) - [Theme UI | Vue | Able Pro](#theme-ui-vue-able-pro) - [Customizer | .Net | Able Pro](#customizer-net-able-pro) - [Support | React | Able Pro](#support-react-able-pro) - [Customizer | Django | Able Pro](#customizer-django-able-pro) - [Figma | React | Able Pro](#figma-react-able-pro) - [Project Configuration | React | Able Pro](#project-configuration-react-able-pro) - [Dependencies | Vue Laravel | Able Pro](#dependencies-vue-laravel-able-pro) - [Authentication | React | Able Pro](#authentication-react-able-pro) - [Changelog | React | Able Pro](#changelog-react-able-pro) - [Theme UI | Vue Laravel | Able Pro](#theme-ui-vue-laravel-able-pro) - [Theme/Style Configuration | React | Able Pro](#theme-style-configuration-react-able-pro) - [Dependencies | sveltekit | Able Pro](#dependencies-sveltekit-able-pro) - [How to | Angular | Able Pro](#how-to-angular-able-pro) - [Development | Vue Laravel | Able Pro](#development-vue-laravel-able-pro) - [Customizer | sveltekit | Able Pro](#customizer-sveltekit-able-pro) - [Integration | React | Able Pro](#integration-react-able-pro) - [How to's | React | Able Pro](#how-to-s-react-able-pro) - [Dependencies | React | Able Pro](#dependencies-react-able-pro) - [Directory Structure | Bootstrap | Able Pro](#directory-structure-bootstrap-able-pro) - [Page Structure | Bootstrap | Able Pro](#page-structure-bootstrap-able-pro) - [Theme Contrast | Bootstrap | Able Pro](#theme-contrast-bootstrap-able-pro) - [Light & Dark Layout | Bootstrap | Able Pro](#light-dark-layout-bootstrap-able-pro) - [Directory Structure | Tailwind - HTML | Able Pro](#directory-structure-tailwind-html-able-pro) - [Page Structure | Tailwind - HTML | Able Pro](#page-structure-tailwind-html-able-pro) - [Preset Colors | Bootstrap | Able Pro](#preset-colors-bootstrap-able-pro) - [Sidebar Caption | Bootstrap | Able Pro](#sidebar-caption-bootstrap-able-pro) - [Light & Dark Layout | Tailwind - HTML | Able Pro](#light-dark-layout-tailwind-html-able-pro) - [Light & Dark Layout | CodeIgnitor | Able Pro](#light-dark-layout-codeignitor-able-pro) - [Rtl Layout | Bootstrap | Able Pro](#rtl-layout-bootstrap-able-pro) - [Theme Contrast | Tailwind - HTML | Able Pro](#theme-contrast-tailwind-html-able-pro) - [Preset Colors | Tailwind - HTML | Able Pro](#preset-colors-tailwind-html-able-pro) - [Icons | Vue Laravel | Able Pro](#icons-vue-laravel-able-pro) - [Preset Colors | CodeIgnitor | Able Pro](#preset-colors-codeignitor-able-pro) - [Skip Auth | Vue | Able Pro](#skip-auth-vue-able-pro) - [Preset Colors | .Net | Able Pro](#preset-colors-net-able-pro) - [Change Typography | Vue | Able Pro](#change-typography-vue-able-pro) - [Sidebar Caption | .Net | Able Pro](#sidebar-caption-net-able-pro) - [Box Container | Tailwind - HTML | Able Pro](#box-container-tailwind-html-able-pro) - [Box Container | .Net | Able Pro](#box-container-net-able-pro) - [Rtl Layout | .Net | Able Pro](#rtl-layout-net-able-pro) - [Rtl Layout | sveltekit | Able Pro](#rtl-layout-sveltekit-able-pro) - [Login as First Page | React | Able Pro](#login-as-first-page-react-able-pro) - [Remove Auth | React | Able Pro](#remove-auth-react-able-pro) - [Axios API Calls | Vue Laravel | Able Pro](#axios-api-calls-vue-laravel-able-pro) - [RTL | Vue Laravel | Able Pro](#rtl-vue-laravel-able-pro) - [Preset Colors | sveltekit | Able Pro](#preset-colors-sveltekit-able-pro) - [Prerequisites | UI-Kit - V1.1.0 | SaasAble Documentation](#prerequisites-ui-kit-v1-1-0-saasable-documentation) - [Comparison | React | Able Pro](#comparison-react-able-pro) - [Remove Authentication | Angular | Able Pro](#remove-authentication-angular-able-pro) - [Rtl Layout | Django | Able Pro](#rtl-layout-django-able-pro) - [Theme Settings | Vue Laravel | Able Pro](#theme-settings-vue-laravel-able-pro) - [Remove Role Base Authentication | Angular | Able Pro](#remove-role-base-authentication-angular-able-pro) - [Render Menu from the backend | React | Able Pro](#render-menu-from-the-backend-react-able-pro) - [Box Container | Django | Able Pro](#box-container-django-able-pro) - [Box Container | sveltekit | Able Pro](#box-container-sveltekit-able-pro) - [Guard Children Routes | Angular | Able Pro](#guard-children-routes-angular-able-pro) - [Preset Colors | Django | Able Pro](#preset-colors-django-able-pro) - [Sidebar Caption | sveltekit | Able Pro](#sidebar-caption-sveltekit-able-pro) - [State Management | Vue Laravel | Able Pro](#state-management-vue-laravel-able-pro) - [Frontend API | Vue Laravel | Able Pro](#frontend-api-vue-laravel-able-pro) - [Sidebar Caption | Django | Able Pro](#sidebar-caption-django-able-pro) - [Theme Contrast | sveltekit | Able Pro](#theme-contrast-sveltekit-able-pro) - [Dashboard as First Page | Angular | Able Pro](#dashboard-as-first-page-angular-able-pro) - [Remove menu render from Backend | React | Able Pro](#remove-menu-render-from-backend-react-able-pro) - [Seed | React | Able Pro](#seed-react-able-pro) - [Theme Colors | Vue | Able Pro](#theme-colors-vue-able-pro) - [Dashboard as First Page | React | Able Pro](#dashboard-as-first-page-react-able-pro) - [Login as First Page | Angular | Able Pro](#login-as-first-page-angular-able-pro) - [Routing | Vue Laravel | Able Pro](#routing-vue-laravel-able-pro) - [Switch to AWS Cognito | React | Able Pro](#switch-to-aws-cognito-react-able-pro) - [Switch to Firebase | React | Able Pro](#switch-to-firebase-react-able-pro) - [Axios API Calls | Vue | Able Pro](#axios-api-calls-vue-able-pro) - [Box Container | CodeIgnitor | Able Pro](#box-container-codeignitor-able-pro) - [Rtl Layout | Tailwind - HTML | Able Pro](#rtl-layout-tailwind-html-able-pro) - [Light & Dark Layout | Django | Able Pro](#light-dark-layout-django-able-pro) - [Theme Contrast | Django | Able Pro](#theme-contrast-django-able-pro) - [Theme Colors | Vue Laravel | Able Pro](#theme-colors-vue-laravel-able-pro) - [Theme Contrast | CodeIgnitor | Able Pro](#theme-contrast-codeignitor-able-pro) - [Rtl Layout | CodeIgnitor | Able Pro](#rtl-layout-codeignitor-able-pro) - [Theme Contrast | .Net | Able Pro](#theme-contrast-net-able-pro) - [Routing | Vue | Able Pro](#routing-vue-able-pro) - [Sidebar Caption | CodeIgnitor | Able Pro](#sidebar-caption-codeignitor-able-pro) - [Change Logo | Vue Laravel | Able Pro](#change-logo-vue-laravel-able-pro) - [Authentication | Vue | Able Pro](#authentication-vue-able-pro) - [Light & Dark Layout | sveltekit | Able Pro](#light-dark-layout-sveltekit-able-pro) - [Sanctum Authentication | Vue Laravel | Able Pro](#sanctum-authentication-vue-laravel-able-pro) - [Change Logo | Vue | Able Pro](#change-logo-vue-able-pro) - [Light & Dark Layout | .Net | Able Pro](#light-dark-layout-net-able-pro) - [Change Typography | Vue Laravel | Able Pro](#change-typography-vue-laravel-able-pro) - [Role Base Authentication | Angular | Able Pro](#role-base-authentication-angular-able-pro) - [State Management | Vue | Able Pro](#state-management-vue-able-pro) - [Sidebar Caption | Tailwind - HTML | Able Pro](#sidebar-caption-tailwind-html-able-pro) - [Switch to Auth0 | React | Able Pro](#switch-to-auth0-react-able-pro) - [Sanctum Integration | Vue Laravel | Able Pro](#sanctum-integration-vue-laravel-able-pro) - [Theme Settings | Vue | Able Pro](#theme-settings-vue-able-pro) - [Database Connection | Vue Laravel | Able Pro](#database-connection-vue-laravel-able-pro) - [Icons | Vue | Able Pro](#icons-vue-able-pro) - [Box Container | Bootstrap | Able Pro](#box-container-bootstrap-able-pro) - [Introduction | SaasAble Documentation](#introduction-saasable-documentation) - [Deployment | UI-Kit - V1.1.0 | SaasAble Documentation](#deployment-ui-kit-v1-1-0-saasable-documentation) - [Setup | UI-Kit - V1.1.0 | SaasAble Documentation](#setup-ui-kit-v1-1-0-saasable-documentation) - [Folder structure | UI-Kit - V1.1.0 | SaasAble Documentation](#folder-structure-ui-kit-v1-1-0-saasable-documentation) - [Env Variables | UI-Kit - V1.1.0 | SaasAble Documentation](#env-variables-ui-kit-v1-1-0-saasable-documentation) - [MailerLite | UI-Kit - V1.1.0 | SaasAble Documentation](#mailerlite-ui-kit-v1-1-0-saasable-documentation) - [Favicon | UI-Kit - V1.1.0 | SaasAble Documentation](#favicon-ui-kit-v1-1-0-saasable-documentation) - [SEO - Metadata | UI-Kit - V1.1.0 | SaasAble Documentation](#seo-metadata-ui-kit-v1-1-0-saasable-documentation) - [Routing | UI-Kit - V1.1.0 | SaasAble Documentation](#routing-ui-kit-v1-1-0-saasable-documentation) - [Analytics | UI-Kit - V1.1.0 | SaasAble Documentation](#analytics-ui-kit-v1-1-0-saasable-documentation) - [Dependencies | UI-Kit - V1.1.0 | SaasAble Documentation](#dependencies-ui-kit-v1-1-0-saasable-documentation) - [Branding | UI-Kit - V1.1.0 | SaasAble Documentation](#branding-ui-kit-v1-1-0-saasable-documentation) - [Color | UI-Kit - V1.1.0 | SaasAble Documentation](#color-ui-kit-v1-1-0-saasable-documentation) - [Error Handling | UI-Kit - V1.1.0 | SaasAble Documentation](#error-handling-ui-kit-v1-1-0-saasable-documentation) - [Components | UI-Kit - V1.1.0 | SaasAble Documentation](#components-ui-kit-v1-1-0-saasable-documentation) - [Typography | UI-Kit - V1.1.0 | SaasAble Documentation](#typography-ui-kit-v1-1-0-saasable-documentation) - [Icon | UI-Kit - V1.1.0 | SaasAble Documentation](#icon-ui-kit-v1-1-0-saasable-documentation) --- # Introduction | Flat Able - React **Flat Able** is the most developer friendly & highly customization **React + Redux Admin Template** based on Create React App, Redux & Bootstrap 4. We’ve followed best industry standards to make our product easy, fast & highly scalable to work with. **Flat Able** is the most convenient react admin dashboard template for developers as its made with React Components, Create React App, Redux, clean code and fully documented which allows you to build eye-catching, high-quality, high-performance responsive single page applications. [](https://phoenixcoded.gitbook.io/flat-able-react#features) Features -------------------------------------------------------------------------- * Fully Responsive Layout * 5 Dashboard, 400+ Widget Cards * SASS Powered * 200+ Pages * Workable Application * 7+ Live Menu Customize * 6 months of free support included * Easy to Build and Setup * Clear Cut Code style [](https://phoenixcoded.gitbook.io/flat-able-react#technical-specification-credits) Technical Specification (Credits 🙏) ----------------------------------------------------------------------------------------------------------------------------- * Reactjs (**16.9.0**) * Latest [Bootstrap](https://getbootstrap.com/) 4 Stable (v4.3.1) * SASS Powered * [Create React App](https://github.com/facebook/create-react-app) * [Redux](https://redux.js.org/) * [React Router](https://github.com/ReactTraining/react-router) [NextGetting Started](https://phoenixcoded.gitbook.io/flat-able-react/getting-started) Last updated 6 years ago Was this helpful? --- # Installation | Flat Able - React This React template is based on [create-react-app](https://github.com/facebook/create-react-app) and has its `README.md` which you can find very useful. You **don’t** need to install or configure tools like Webpack or Babel. They are configured and hidden so that you can focus on the code. [](https://phoenixcoded.gitbook.io/flat-able-react/installation#to-get-started-follow-this-steps) To get started follow this steps --------------------------------------------------------------------------------------------------------------------------------------- 1. First of all it's required to Install [Node](https://nodejs.org/en/) and npm / [yarn](https://yarnpkg.com/lang/en/) . 2. Open your favorite console application (Terminal, iTerm, Command Prompt etc.). Navigate to the `flat-able/`folder and **Install packages** : `npm i,` `npm install` or `yarn install`. This command will install all the required [Node.js](https://nodejs.org/en/) modules into the `node_modules` directory inside `flat-able/`folder. And now, you are ready to run the Flat Able for the first time. 3. To run project locally: `npm start` or `yarn start` This command will runs the app in development mode. Open [http://localhost:3000](http://localhost:3000/) to view it in the browser. The page will automatically reload if you make changes to the code. 4. Now you can use This React project for your application development, make the necessary changes. 5. To builds the app for production `npm run build` or `yarn build`. It will create the `build/` folder inside this project directory .It correctly bundles React in production mode and optimizes the build for the best performance. The build is minify and the filenames include the hashes. Your app is ready to be deployed. The project was built assuming it is hosted at the server root folder of domain/platform i.e `http://example.com`. You can control this with the homepage field in your `package.json`. To deploy build for sub-folder i.e `http://example.com/folder-name/` than `"homepage" : "http://example.com/folder-name/".` You also need to set base-name `` in `router.js` file. You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/) . **You’ll need to have Node v12.x.x or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. [PreviousPrerequisites](https://phoenixcoded.gitbook.io/flat-able-react/prerequisites) [NextFile Structure](https://phoenixcoded.gitbook.io/flat-able-react/file-structure) Last updated 6 years ago Was this helpful? --- # Overview | NextJS | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F4160039747-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwavVPBvcjnLZ17Y9HyuV%252Fuploads%252F3VKEpetTXpFZZooFm8iT%252FNext%2520Admin%2520Dashboard%2520Template%2520-%2520v4.0.0.png%3Falt%3Dmedia%26token%3D7a18d944-fcf7-4d7d-91c0-13d57f34134e&width=768&dpr=4&quality=100&sign=a60494a8&sv=2) Able Pro Material Dashboard Template - One of the Featured template of Themeforest [](https://phoenixcoded.gitbook.io/able-pro/nextjs/#technology-stack) Technology Stack ------------------------------------------------------------------------------------------- * Material UI v7 components library * Authentication Methods via next-auth * React Hooks API * React Context API for State Management * Next 15 * React19 * Axios * Code Splitting * CSS-in-JS * Multi-Language * SWR [](https://phoenixcoded.gitbook.io/able-pro/nextjs/#credits) Credits ------------------------------------------------------------------------- * [React Hooks (19.1.0)](https://reactjs.org/docs/hooks-intro.html) * [Material UI v7](https://mui.com/) * [SWR](https://swr.vercel.app/) * [next-auth](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjnspKY2ruEAxViSmwGHdD-A-wQFnoECAYQAQ&url=https%3A%2F%2Fnext-auth.js.org%2F&usg=AOvVaw1OZh8Ea0FnUi5KcIaUmxor&opi=89978449) * [Google Fonts](https://fonts.google.com/) [](https://phoenixcoded.gitbook.io/able-pro/nextjs/#any-suggestions-or-feedback) Any suggestions? OR Feedback ------------------------------------------------------------------------------------------------------------------ Feedback from our beloved community is always welcome. Feel free to reach out anytime at our [Support Panel](https://phoenixcoded.authordesk.app/) . We would love to hear from you at any time. [NextPre-requisites](https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites) Last updated 1 month ago --- # Getting Started | Flat Able - React [](https://phoenixcoded.gitbook.io/flat-able-react/getting-started#reactjs) ReactJS ---------------------------------------------------------------------------------------- [React](https://reactjs.org/) -A JavaScript library for building user interfaces. React is the core of our template. If you don't know what React is or don't know how to use it, we strongly recommend checking the React before start doing anything with this theme. [](https://phoenixcoded.gitbook.io/flat-able-react/getting-started#create-react-app-cli) Create React App (CLI) -------------------------------------------------------------------------------------------------------------------- [Create React App](https://github.com/facebook/create-react-app) is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project. [PreviousIntroduction](https://phoenixcoded.gitbook.io/flat-able-react) [NextPrerequisites](https://phoenixcoded.gitbook.io/flat-able-react/prerequisites) Last updated 6 years ago Was this helpful? --- # Prerequisites | Flat Able - React [](https://phoenixcoded.gitbook.io/flat-able-react/prerequisites#node.js) Node.JS -------------------------------------------------------------------------------------- To install and use this theme, It's required to be installed [Node.js](https://nodejs.org/) on your computer. Node is required only for run and deploy the application, we won't get into too much detail for the same. It' also not required to have detailed knowledge of Node.js [](https://phoenixcoded.gitbook.io/flat-able-react/prerequisites#node-yarn-package-manager) Node/Yarn - Package Manager ---------------------------------------------------------------------------------------------------------------------------- This React template uses [npm](https://www.npmjs.com/) / [yarn](https://yarnpkg.com/) package manager to install and manage 3rd party components and libraries. [PreviousGetting Started](https://phoenixcoded.gitbook.io/flat-able-react/getting-started) [NextInstallation](https://phoenixcoded.gitbook.io/flat-able-react/installation) Last updated 6 years ago Was this helpful? --- # Routing | Flat Able - React This template routing system based on [react-router](https://reacttraining.com/react-router/) and its package [react-router-dom,](https://reacttraining.com/react-router/web/guides/quick-start) it's also use code splitting for better performance. **How can I add new page with menu item ?** You can use the below explanation to add/remove menu routs and their menu items. [](https://phoenixcoded.gitbook.io/flat-able-react/routing#configure-route) Configure route ------------------------------------------------------------------------------------------------ Open `flat-able/src/routse.js` and `flat-able/src/routes.js`You will find the below example code. In below code we have show how you can add new page route. router.js Copy import { lazy } from 'react'; const Analytic = lazy(() => import("./views/dashboard/analytic")) const Sales = lazy(() => import("./views/dashboard/sales")) const Crypto = lazy(() => import("./views/dashboard/crypto")) const Project = lazy(() => import("./views/dashboard/project")) const HelpDesk = lazy(() => import("./views/dashboard/helpdesk")) const StatistcWidget = lazy(() => import("./views/widget/statisticWidget")) ... ... ... const Route = [\ /* Dashboard */\ { exact: true, path: "/dashboard/analyatics", name: "Analytic", component: Analytic },\ { exact: true, path: "/dashboard/sales", name: "Sales", component: Sales },\ ...\ ...\ ] export default Route [](https://phoenixcoded.gitbook.io/flat-able-react/routing#add-menu-item) Add menu item -------------------------------------------------------------------------------------------- To add menu items you can use `flat-able/src/menu-items.js` file. Below code we have show how you can use new menu item. menus.js Copy export default { items: [\ {\ id: 'navigation',\ title: 'Navigation',\ type: 'group',\ icon: 'icon-navigation',\ children: [\ {\ id: 'dashboard',\ title: 'Dashboard',\ type: 'collapse',\ icon: 'feather icon-home',\ children: [\ {\ id: 'analytics',\ title: 'Analytics',\ type: 'item',\ url: '/dashboard/analytics'\ },\ {\ id: 'sales',\ title: 'Sales',\ type: 'item',\ url: '/dashboard/sales',\ badge: {\ title: 'NEW',\ type: 'badge-danger'\ }\ }\ ]\ },\ ]\ },\ ...\ ...\ ...\ {\ id: 'support',\ title: 'Support',\ type: 'group',\ icon: 'icon-support',\ children: [\ {\ id: 'menu-level',\ title: 'Menu Levels',\ type: 'collapse',\ icon: 'feather icon-menu',\ children: [\ {\ id: 'menu-level-1.1',\ title: 'Menu Level 1.1',\ type: 'item',\ url: '#!',\ },\ {\ id: 'menu-level-1.2',\ title: 'Menu Level 2.2',\ type: 'collapse',\ children: [\ {\ id: 'menu-level-2.1',\ title: 'Menu Level 2.1',\ type: 'item',\ url: '#',\ },\ {\ id: 'menu-level-2.2',\ title: 'Menu Level 2.2',\ type: 'collapse',\ children: [\ {\ id: 'menu-level-3.1',\ title: 'Menu Level 3.1',\ type: 'item',\ url: '#',\ },\ {\ id: 'menu-level-3.2',\ title: 'Menu Level 3.2',\ type: 'item',\ url: '#',\ }\ ]\ }\ ]\ }\ ]\ },\ {\ id: 'disabled-menu',\ title: 'Disabled Menu',\ type: 'item',\ url: '#',\ classes: 'nav-item disabled',\ icon: 'feather icon-power'\ },\ {\ id: 'sample-page',\ title: 'Sample Page',\ type: 'item',\ url: '/sample-page',\ classes: 'nav-item',\ icon: 'feather icon-sidebar'\ }\ ]\ }\ ] } [PreviousFile Structure](https://phoenixcoded.gitbook.io/flat-able-react/file-structure) [NextTemplate Config](https://phoenixcoded.gitbook.io/flat-able-react/template-config) Last updated 6 years ago Was this helpful? --- # File Structure | Flat Able - React [](https://phoenixcoded.gitbook.io/flat-able-react/file-structure#project-structure) Project structure ----------------------------------------------------------------------------------------------------------- Under the `flat-able/`folder you will find the project folder structure. Copy flat-able/ ├── .gitignore ├── package.json -> Package json file. ├── README.md -> Creat react app Readme file ├── server.js ├── public/ │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src/ ├── App/ | ├── components -> Template custom components | ├── layout -> Layout components & routers | ├── index.js ├── assets/ | ├── images/ | ├── scss/ -> Template SCSS files, check folder structure below ├── Demo/ -> View files for all pages ├── containers/ -> Data fetching and then renders its corresponding sub-component ├── hoc/ ├── store/ -> Redux App actions, reducers, storeConfig & types ├── config.js -> Config. file to change layouts & menu color, width, image etc... ├── index.js -> Application root js file ├── index.scss -> Application main scss file ├── menu-item.js -> Allication menu data ├── route.js -> Add routers for pages ├── routes.js -> Add routers for auth pages └── serviceWorker.js [](https://phoenixcoded.gitbook.io/flat-able-react/file-structure#scss-structure) SCSS structure ----------------------------------------------------------------------------------------------------- Under the `flat-able/src/assets/scss/`folder you will find the following folder structure. Copy SCSS/ ├── ng-module/ -> Third party plugins customisation scss ├── settings/ -> Template variable scss folder ├── theme/ -> Layout and React views specific scss files ├── layout-dark.scss -> Application dark file ├── layout-rtl.scss -> Application RTL file ├── style.scss -> Application main file [PreviousInstallation](https://phoenixcoded.gitbook.io/flat-able-react/installation) [NextRouting](https://phoenixcoded.gitbook.io/flat-able-react/routing) Last updated 6 years ago Was this helpful? --- # Template Config | Flat Able - React You can edit this file at `**[ ../src/config.ts ]**` **Option** **Default** **Data Type** **Description** **layout** vertical String `vertical`, `horizontal` **subLayout** \- String `horizontal-2` (only used for layout is horizontal) **collapseMenu** false Boolean `true`, `false` **layoutType** menu-dark String `menu-dark`, `menu-light`, `dark` **headerBackColor** header-dark String `header-blue`, `header-red`, `header-purple`, `header-info`, `header-green`,`header-dark` **rtlLayout** false Boolean `true`, `false` **navFixedLayout** true Boolean `true`, `false` **headerFixedLayout** true Boolean `true`, `false` **boxLayout** false Boolean `true`, `false` config.js Copy export default { defaultPath: '/dashboard/analytics', basename: '/flat-able/react/default', // only at build time to set, like //next/react/ layout: 'vertical', // vertical, horizontal subLayout: '', // horizontal-2 collapseMenu: false, // mini-menu layoutType: 'menu-dark', // menu-dark, menu-light, dark headerBackColor: 'header-dark', // header-blue, header-red, header-purple, header-green header-info, header-dark rtlLayout: false, navFixedLayout: true, headerFixedLayout: true, boxLayout: false }; [PreviousRouting](https://phoenixcoded.gitbook.io/flat-able-react/routing) [NextLayout Option](https://phoenixcoded.gitbook.io/flat-able-react/layout-option) Last updated 6 years ago Was this helpful? --- # Code Splitting | Flat Able - React [](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting#code-splitting) Code Splitting ----------------------------------------------------------------------------------------------------- Bundling is great, but as your app grows, your bundle will grow too. Especially if you are including large third-party libraries. You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load. To avoid winding up with a large bundle, it’s good to get ahead of the problem and start “splitting” your bundle. [Code-Splitting](https://webpack.js.org/guides/code-splitting/) is a feature supported by bundlers like Webpack and Browserify (via [factor-bundle](https://github.com/browserify/factor-bundle) ) which can create multiple bundles that can be dynamically loaded at runtime. [](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting#react.lazy) React.lazy --------------------------------------------------------------------------------------------- > `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend [React Loadable](https://github.com/thejameskyle/react-loadable) > . It has a nice [guide for bundle splitting with server-side rendering](https://github.com/thejameskyle/react-loadable#------------server-side-rendering) > . The `React.lazy` function lets you render a dynamic import as a regular component. ### [](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting#before-code-splitting) Before code splitting: Copy import OtherComponent from './OtherComponent'; function MyComponent() { return (
); } ### [](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting#after-code-splitting) After code splitting: Copy const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return (
); } This will automatically load the bundle containing the `OtherComponent` when this component gets rendered. `React.lazy` takes a function that must call a dynamic `import()`. This must return a `Promise` which resolves to a module with a `default` export containing a React component. * Reference: [Code Splitting](https://reactjs.org/docs/code-splitting.html) * For more details : [https://reactjs.org/docs/code-splitting.html](https://reactjs.org/docs/code-splitting.html) [PreviousLayout Option](https://phoenixcoded.gitbook.io/flat-able-react/layout-option) [NextSupport](https://phoenixcoded.gitbook.io/flat-able-react/support) Last updated 6 years ago Was this helpful? --- # Changelog | Flat Able - React [](https://phoenixcoded.gitbook.io/flat-able-react/changelog#v1.0-release) v1.0 - Release ---------------------------------------------------------------------------------------------- * Initial release. [PreviousSupport](https://phoenixcoded.gitbook.io/flat-able-react/support) Last updated 6 years ago Was this helpful? --- # Layout Option | Flat Able - React You can edit this file at `**[ ../src/config.ts ]**` [](https://phoenixcoded.gitbook.io/flat-able-react/layout-option#main-layouts) Main Layouts ------------------------------------------------------------------------------------------------ Default / Vertical Horizontal Light Layout Dark Layout * layout: `vertical` * subLayout: ' ' * collapseMenu: `false` * layoutType: `menu-light` * headerBackColor: `header-dark` * rtlLayout: `false` * navFixedLayout: `true` * headerFixedLayout: `true` * boxLayout: `false` * layout: `horizontal` * navFixedLayout: `false` * headerFixedLayout: `false` * layout: `vertical/horizontal` * layoutType: `menu-light` * headerBackColor: `header-default` * layout: `vertical/horizontal` * layoutType: `dark` * headerBackColor: `header-dark` [](https://phoenixcoded.gitbook.io/flat-able-react/layout-option#vertical-layouts) Vertical Layouts -------------------------------------------------------------------------------------------------------- Static Layout Fixed Layout Nav Fixed Collapsed Menu RTL Layout Box Layout * layout: `vertical` * navFixedLayout: `false` * headerFixedLayout: `false` * layout: `vertical` * navFixedLayout: `true` * headerFixedLayout: `true` * layout: `vertical` * navFixedLayout: `true` * headerFixedLayout: `false` * layout: `vertical` * collapseMenu: `true` * layout: `vertical` * rtlLayout: `true` * layout: `vertical` * headerFixedLayout: `false` * boxLayout: `true` [](https://phoenixcoded.gitbook.io/flat-able-react/layout-option#horizontal-layouts) Horizontal Layouts ------------------------------------------------------------------------------------------------------------ Horizontal-2 * layout: `horizontal` * subLayout: `horizontal-2` * navFixedLayout: `false` * headerFixedLayout: `false` [PreviousTemplate Config](https://phoenixcoded.gitbook.io/flat-able-react/template-config) [NextCode Splitting](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting) Last updated 6 years ago Was this helpful? --- # Support | Flat Able - React ### [](https://phoenixcoded.gitbook.io/flat-able-react/support#please-note-that-our-support-is-limited-only-for-those-who-have-purchased-our-item) Please note that our support is limited only for those who have purchased our item. We are trying our best to let the theme run as it should be (ie. like DEMO SITE). But we CANNOT provide any customization on the theme. Also please understand that we CANNOT offer compatibility with each and every JavaScript plugin out there. Thank yo so much! [](https://phoenixcoded.gitbook.io/flat-able-react/support#before-submitting-the-ticket) Before submitting the ticket. --------------------------------------------------------------------------------------------------------------------------- 1. Make sure that you are running the latest version of theme. 2. Make sure that you deeply checked theme's documentation and try to search for public tickets in case of someone else asked the same question before. 3. Please watch theme introduction, folder structure and customization videos\[If available\] to see if you get the answer. [](https://phoenixcoded.gitbook.io/flat-able-react/support#while-submitting-the-ticket) While submitting the ticket. ------------------------------------------------------------------------------------------------------------------------- Please be as specific as possible when starting a new ticket, it really helps us to identify the root of your problem when you provide a link to your site, a screenshot of your error message, snippet or all of the above. [](https://phoenixcoded.gitbook.io/flat-able-react/support#after-submitting-the-ticket-ie.-comment) After submitting the ticket(ie. comment). -------------------------------------------------------------------------------------------------------------------------------------------------- * Normally, we will get back to customers in 12-24 hours in business day. * The older tickets will be the first priority. So after you create the ticket, if possible, please do not reply to the ticket if our team hasn't replied to you yet because it will update your ticket response date to sooner and the priority will be lower. This might cause the delay replying. [](https://phoenixcoded.gitbook.io/flat-able-react/support#my-support-has-expired.-what-should-i-do) My support has expired. What should I do? --------------------------------------------------------------------------------------------------------------------------------------------------- When your support pack has expired, you won't be able to create new tickets anymore. You can purchase support extension in item page. [PreviousCode Splitting](https://phoenixcoded.gitbook.io/flat-able-react/code-splitting) [NextChangelog](https://phoenixcoded.gitbook.io/flat-able-react/changelog) Last updated 6 years ago Was this helpful? --- # Pre-requisites | NextJS | Able Pro You don’t need to install or configure tools like Webpack or Babel. They are configured and hidden so that you can focus on the code. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites#pre-requisites) **Pre-requisites** --------------------------------------------------------------------------------------------------------- Able Pro is based on `node` and `next js`. Please check the following **prerequisites** before jumping into it. **Node** is the primary prerequisite for Able Pro. Open your command terminal and check using the `**node -v**` command Copy c:\> node -v v22.x.x **Package Manager** - npm or yarn Copy c:\> npm -v 11.5.2 **Package Manager - yarn** This project uses **Yarn (via Corepack)** for dependency management. The required Yarn version is specified in the `package.json` file, and Corepack ensures the correct version is used automatically. There's no need to globally install Yarn. **If Corepack is not available:** Corepack is included with Node.js version 16.10+ by default. If it's not installed or enabled: 1. Ensure you’re using Node.js 16.10 or higher. 2. Enable Corepack by running : `corepack enable` 3. If Corepack is unavailable, update Node.js to a supported version. After Corepack is enabled, simply run `yarn` commands, and the correct version will be handled for you automatically. For more information about Yarn and Corepack, refer to the documentation: 1. [https://yarnpkg.com/getting-started/install](https://yarnpkg.com/getting-started/installhttps://yarnpkg.com/corepack) 2. [https://yarnpkg.com/corepack](https://yarnpkg.com/getting-started/installhttps://yarnpkg.com/corepack) [](https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites#troubleshooting) **Troubleshooting** ----------------------------------------------------------------------------------------------------------- If you face the following error in your terminal, it means **npm** is not installed in your system. Copy c:\> npm -v 'npm' is not recognized as an internal or external command, operable program or batch file. Please install it using this [link](https://yarnpkg.com/getting-started/install) , as it does not come with **Node** automatically. [PreviousOverview](https://phoenixcoded.gitbook.io/able-pro/nextjs) [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start) Last updated 1 month ago --- # Roadmap | NextJS | Able Pro We love our community and customer base to achieve the best possible upcoming features in Able Pro. Stay tuned with us. ​ [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies) [NextSupport](https://phoenixcoded.gitbook.io/able-pro/nextjs/support) Last updated 1 year ago --- # Quick Start | NextJS | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start#installation) Installation Navigate to your root folder `**(i.e. able-pro-material-react)**` Copy c:\>cd able-pro-material-next Install Packages by **npm** as per your preferences. Here we are using the package manager. Copy c:\able-pro-material-next> npm i **We would recommend yarn over npm**. Why? see this: [https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/](https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/) ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start#start) Start After package installation, you can start your app by using `**npm run dev**` the command Copy c:\ablepro-material-next> npm run dev This will start your local server at `**http://localhost:3000**` Also, your terminal shows the following. Copy Compiled successfully! You can now view able-pro-material-react in the browser. Local: http://localhost:3000 On Your Network: http://192.168.29.77:3000 Note that the development build is not optimized. To create a production build, use npm run build. ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start#build-and-deploy) Build & Deploy This might be too early to deploy, but it is always good to know how to deploy. To build your app for production use `**npm run build**` command Copy c:\able-pro-material-next> yarn build or c:\able-pro-material-next> npm run build **You’ll need to have Node v20.x.x or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects easily. [PreviousPre-requisites](https://phoenixcoded.gitbook.io/able-pro/nextjs/pre-requisites) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/nextjs/folder-structure) Last updated 1 month ago --- # How to | NextJS | Able Pro This section provides answers to frequently asked questions based on customer inquiries received through our support panel. [Login as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/login-as-first-page) [Dashboard as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/dashboard-as-first-page) [Remove menu render from Backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-menu-render-from-backend) [Render Menu from the backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend) [Remove Auth](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-auth) [PreviousTheme/Style Configuration](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration) [NextLogin as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/login-as-first-page) Last updated 1 year ago --- # Integration | NextJS | Able Pro With the years of experience and after crafted many templates, we come to know that, users are often confused about how to use all those components with most of the admin templates. If you ever downloaded an admin template, you might come across questions like, "_**How can I use components in the project?"**_ _**"How can I create a new project and set up theme/components?"**_ _**"Can I have minimal code-base to start?**__"_ etc. If you ever found yourself in such a situation, we came here to the rescue. Able Pro is structured with a huge set of ready-to-use components. We tried to provide as many as possible components with customization so that you can integrate those directly into your projects. In this Integration guide, we are going to explain, how can you create new a project with minimum setup and integrate some components as per your need. There are two ways to get started with minimal things. Please continue to on next chapter. [PreviousFigma](https://phoenixcoded.gitbook.io/able-pro/nextjs/figma) [NextSeed](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/seed) Last updated 1 year ago --- # Able Pro - Overview | Able Pro Able Pro is an Admin Dashboard Template. It has a complete list of features and apps that help you to reduce your development time. Following are the available tech versions of Able Pro. Click to see their respective documentation. [](https://phoenixcoded.gitbook.io/able-pro/bootstrap) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FW8jkQn9oRtTAaFg8SKA5%252Fbootstrap-git-doc.png%3Falt%3Dmedia%26token%3Da602bffe-cd0f-45a4-a35f-639b098a73de&width=490&dpr=4&quality=100&sign=99d0d8e8&sv=2) Bootstrap 5 [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FphiikjOAaOlv1lApeuHx%252Ftailwind-git-doc.png%3Falt%3Dmedia%26token%3D21d4e9e7-74a1-4365-88d0-af7c98d521d6&width=490&dpr=4&quality=100&sign=be5ce626&sv=2) Tailwind CSS v3 [](https://phoenixcoded.gitbook.io/able-pro/react/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FidLx0pDlGdNH4bGCKxNB%252Freact-git-doc.png%3Falt%3Dmedia%26token%3Dc1e57ca8-6fe9-46db-9bc2-651f6fe87d3d&width=490&dpr=4&quality=100&sign=6c96e891&sv=2) Reactjs [](https://phoenixcoded.gitbook.io/able-pro/nextjs/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252Fg7c3rJ7iEoXPoJxH1NH4%252Fnext-git-doc.png%3Falt%3Dmedia%26token%3D2855c7bf-8994-4566-8860-57a6f4e129c5&width=490&dpr=4&quality=100&sign=f4e0e741&sv=2) Nextjs [](https://phoenixcoded.gitbook.io/able-pro/vue/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FTsBhAjLvAbWzd4FmE1xl%252Fvue-git-doc.png%3Falt%3Dmedia%26token%3D6ce06f3f-c7d9-4710-868c-f44697b342dc&width=490&dpr=4&quality=100&sign=cd97a4af&sv=2) Vuejs [](https://phoenixcoded.gitbook.io/able-pro/angular/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FWZ56dTYGWaYbm9eptMlt%252Fangular-git-doc.png%3Falt%3Dmedia%26token%3D0b4da418-0c75-4db4-997d-09c7647e95f8&width=490&dpr=4&quality=100&sign=d2c655a5&sv=2) Angular [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FheQEhVTnGVp8FK48uJTS%252Flaravel-git-doc.png%3Falt%3Dmedia%26token%3Dc3e340fe-c20a-404b-a2ae-8472df8ae471&width=490&dpr=4&quality=100&sign=b5a4f6b4&sv=2) Laravel + Vuejs [](https://phoenixcoded.gitbook.io/able-pro/.net/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FIHKx0bxsQkHm235mpydT%252Fnet-git-doc.png%3Falt%3Dmedia%26token%3D1cc6103b-7276-4de9-b275-a359760e510a&width=490&dpr=4&quality=100&sign=b6d9b702&sv=2) Asp.net [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252Fs7mwh8hcGw6NV2PbgtLI%252Fci-git-doc.png%3Falt%3Dmedia%26token%3D1f3638f9-a65f-4efe-b6ca-6116ae572410&width=490&dpr=4&quality=100&sign=aa419155&sv=2) CodeIgniter ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FjXh6a68CDfJTwTwvuiGM%252Ffigma-git-doc.png%3Falt%3Dmedia%26token%3D855c077a-00c2-4b71-9ed9-685a350213b2&width=490&dpr=4&quality=100&sign=843521ef&sv=2) Figma [](https://phoenixcoded.gitbook.io/able-pro/django/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FD1DsupTECEcyLebw2zZR%252Fdjango-git-doc.png%3Falt%3Dmedia%26token%3D837612bb-ca35-4bf9-9a31-16348564e3cc&width=490&dpr=4&quality=100&sign=4c8752db&sv=2) Django [](https://phoenixcoded.gitbook.io/able-pro/flask/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252FvuiY6rnwWuftW25NtWTw%252Fflask-git-doc.png%3Falt%3Dmedia%26token%3D288be50a-cb23-48f1-bc66-1138becb3ed4&width=490&dpr=4&quality=100&sign=ce06b78a&sv=2) Flask [](https://phoenixcoded.gitbook.io/able-pro/nodejs/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252Fmb6db3z5NhDTHm183fXi%252Fnode-git-doc.png%3Falt%3Dmedia%26token%3D53a80f39-3aeb-425d-8150-62293010908b&width=490&dpr=4&quality=100&sign=c53b2fb1&sv=2) Node [](https://phoenixcoded.gitbook.io/able-pro/sveltekit/) ![Cover](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F934269069-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FtrGFMnL8sQDDuw1zZb9s%252Fuploads%252Fu5CjBoZzdXlMbZpJHmiT%252Fsvelte-git-doc.png%3Falt%3Dmedia%26token%3D0445a2e0-0b10-4e48-a1ae-df8cf408024b&width=490&dpr=4&quality=100&sign=588f4117&sv=2) Svelte ### [](https://phoenixcoded.gitbook.io/able-pro#undefined) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/changelog) Last updated 1 year ago --- # Theme/Style Configuration | NextJS | Able Pro Customise Able Pro with your theme. You can change the colours, the typography, and much more. Material-UI offers the flexibility to change the project's style in a single place. Additionally, we have centralised and made it more consistent with a proper file structure. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration#theme-configuration) Theme configuration -------------------------------------------------------------------------------------------------------------------------- The whole theme can be configured from the folder `**src\themes**` . Theme initialisation starts, where the palette, typography, and components' overridable style exist. NEXT (TS) NEXT (JS) src/theme/index.tsx Copy import { ReactNode, useMemo } from 'react'; // material-ui import { createTheme, ThemeOptions, ThemeProvider, Theme, TypographyVariantsOptions, StyledEngineProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; // project-imports import Palette from './palette'; import Typography from './typography'; import CustomShadows from './shadows'; import componentsOverride from './overrides'; import GlobalStyles from './GlobalStyles'; import { NextAppDirEmotionCacheProvider } from './emotionCache'; import { HEADER_HEIGHT, ThemeMode } from 'config'; import useConfig from 'hooks/useConfig'; import getWindowScheme from 'utils/getWindowScheme'; // types import { CustomShadowProps } from 'types/theme'; type ThemeCustomizationProps = { children: ReactNode; }; // ==============================|| DEFAULT THEME - MAIN ||============================== // export default function ThemeCustomization({ children }: ThemeCustomizationProps) { const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig(); let themeMode: any = mode; if (themeMode === ThemeMode.AUTO) { const autoMode = getWindowScheme(); if (autoMode) { themeMode = ThemeMode.DARK; } else { themeMode = ThemeMode.LIGHT; } } const theme: Theme = useMemo(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]); const themeTypography: TypographyVariantsOptions = useMemo( () => Typography(themeMode, fontFamily, theme), [themeMode, fontFamily, theme] ); const themeCustomShadows: CustomShadowProps = useMemo(() => CustomShadows(theme), [theme]); const themeOptions: ThemeOptions = useMemo( () => ({ breakpoints: { values: { xs: 0, sm: 768, md: 1024, lg: 1266, xl: 1440 } }, direction: themeDirection, mixins: { toolbar: { minHeight: HEADER_HEIGHT, paddingTop: 8, paddingBottom: 8 } }, palette: theme.palette, shape: { borderRadius: 8 }, customShadows: themeCustomShadows, typography: themeTypography }), [themeDirection, theme, themeTypography, themeCustomShadows] ); const themes: Theme = createTheme(themeOptions); themes.components = componentsOverride(themes); return ( {children} ); } src/theme/index.jsx Copy import PropTypes from 'prop-types'; import { useMemo } from 'react'; // material-ui import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; // project-imports import Palette from './palette'; import Typography from './typography'; import CustomShadows from './shadows'; import componentsOverride from './overrides'; import GlobalStyles from './GlobalStyles'; import { NextAppDirEmotionCacheProvider } from './emotionCache'; import { HEADER_HEIGHT, ThemeMode } from 'config'; import useConfig from 'hooks/useConfig'; import getWindowScheme from 'utils/getWindowScheme'; // ==============================|| DEFAULT THEME - MAIN ||============================== // export default function ThemeCustomization({ children }) { const { themeDirection, mode, presetColor, fontFamily, themeContrast } = useConfig(); let themeMode = mode; if (themeMode === ThemeMode.AUTO) { const autoMode = getWindowScheme(); if (autoMode) { themeMode = ThemeMode.DARK; } else { themeMode = ThemeMode.LIGHT; } } const theme = useMemo(() => Palette(themeMode, presetColor, themeContrast), [themeMode, presetColor, themeContrast]); const themeTypography = useMemo(() => Typography(themeMode, fontFamily, theme), [themeMode, fontFamily, theme]); const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]); const themeOptions = useMemo( () => ({ breakpoints: { values: { xs: 0, sm: 768, md: 1024, lg: 1266, xl: 1440 } }, direction: themeDirection, mixins: { toolbar: { minHeight: HEADER_HEIGHT, paddingTop: 8, paddingBottom: 8 } }, palette: theme.palette, shape: { borderRadius: 8 }, customShadows: themeCustomShadows, typography: themeTypography }), [themeDirection, theme, themeTypography, themeCustomShadows] ); const themes = createTheme(themeOptions); themes.components = componentsOverride(themes); return ( {children} ); } ThemeCustomization.propTypes = { children: PropTypes.node }; You can check other settings like theme typography, palette, and component style override in the same folder. `**src\themes**` ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration#how-to-customise-it) How to customise it? You might come across questions like how to change a theme's **primary** colour. How to change the textbox or other components that can be applied to an entire theme? #### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration#customize-theme-colors) Customize Theme Colors To change the colour of the theme, you can apply colour directly to `src\theme\palette` For instance, if you want to change colour where `theme.palette.primary.light` is being used in a theme, then update the following in `**src\themes\palette**` NEXT (TS) NEXT (JS) src/themes /palette.ts Copy // material-ui import { alpha, createTheme } from '@mui/material/styles'; import { PaletteMode } from '@mui/material'; // project-imports import ThemeOption from './theme'; import { ThemeMode } from 'config'; // types import { PresetColor } from 'types/config'; import { PaletteThemeProps } from 'types/theme'; // ==============================|| DEFAULT THEME - PALETTE ||============================== // export default function Palette(mode: ThemeMode, presetColor: PresetColor, themeContrast: boolean) { const paletteColor: PaletteThemeProps = ThemeOption(presetColor, mode); return createTheme({ palette: { mode: mode as PaletteMode, common: { black: '#000', white: '#fff' }, ...paletteColor, text: { primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800], secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main, disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400] }, action: { disabled: paletteColor.secondary.light }, divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65), background: { paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff', default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter } } }); } src/themes /palette.js Copy // material-ui import { alpha, createTheme } from '@mui/material/styles'; // project-imports import ThemeOption from './theme'; import { ThemeMode } from 'config'; // ==============================|| DEFAULT THEME - PALETTE ||============================== // export default function Palette(mode, presetColor, themeContrast) { const paletteColor = ThemeOption(presetColor, mode); return createTheme({ palette: { mode: mode, common: { black: '#000', white: '#fff' }, ...paletteColor, text: { primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.87) : paletteColor.secondary[800], secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.45) : paletteColor.secondary.main, disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.1) : paletteColor.secondary[400] }, action: { disabled: paletteColor.secondary.light }, divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker, 0.05) : alpha(paletteColor.secondary.light, 0.65), background: { paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff', default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter } } }); } [](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration#customise-theme-typography) Customise Theme Typography ---------------------------------------------------------------------------------------------------------------------------------------- You can customise the typography used in the theme from a central place. For instance, if you want to change `font-weight` the typography `h5` to `900`. To do that, open `**src\themes\typography**` and update as below: NEXT (TS) NEXT (JS) src/themes /typography.ts Copy // material-ui import { Theme, TypographyVariantsOptions } from '@mui/material/styles'; // project-imports import { ThemeMode } from 'config'; // types import { FontFamily } from 'types/config'; // ==============================|| DEFAULT THEME - TYPOGRAPHY ||============================== // export default function Typography(mode: ThemeMode, fontFamily: FontFamily, theme: Theme): TypographyVariantsOptions { return { .... h5: { fontWeight: 600, fontSize: '1rem', lineHeight: 1.5 }, ... } } src/themes /typography.js Copy // ==============================|| DEFAULT THEME - TYPOGRAPHY ||============================== // export default function Typography(mode, fontFamily, theme) { return { .... h5: { fontWeight: 600, fontSize: '1rem', lineHeight: 1.5 }, ... } } This will apply to all places where you used Typography variants as `**h5**` `****` #### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration#customise-mui-component-style) Customise MUI Component style We have provided a central location to override any default style of any component. All the override styles exist in `**src\themes\overrides**` NEXT (TS) NEXT (JS) src/themes/overrides /Accordion.ts Copy // material-ui import { Theme } from '@mui/material/styles'; // ==============================|| OVERRIDES - ACCORDION ||============================== // export default function Accordion(theme: Theme) { return { MuiAccordion: { defaultProps: { disableGutters: true, square: true, elevation: 0 }, styleOverrides: { root: { border: `1px solid ${theme.palette.divider}`, '&:not(:last-child)': { borderBottom: 0 }, '&:before': { display: 'none' }, '&.Mui-disabled': { backgroundColor: theme.palette.secondary.lighter } } } } }; } src/themes/overrides /Accordion.js Copy // ==============================|| OVERRIDES - ACCORDION ||============================== // export default function Accordion(theme) { return { MuiAccordion: { defaultProps: { disableGutters: true, square: true, elevation: 0 }, styleOverrides: { root: { border: `1px solid ${theme.palette.divider}`, '&:not(:last-child)': { borderBottom: 0 }, '&:before': { display: 'none' }, '&.Mui-disabled': { backgroundColor: theme.palette.secondary.lighter } } } } }; } You can add a default property for any MUI component, and it will be applied everywhere. We emitted lines to view it better in the above code block, but you can see many controls' styles overridden in the same file. Feel free to change it as per your needs. [PreviousColor Presets](https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets) [NextHow to](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to) Last updated 1 month ago --- # Folder Structure | NextJS | Able Pro Under the `able-pro-material-next/` In the directory, you will find the following folder structure. NEXT (TS) NEXT (JS) able-pro-material-next-ts Copy .. ├── public │ ├── assets -> images in different directories │ │ ├── images │ │ │ ├── auth │ │ │ ├── cards │ │ │ ├── ... │ │ ├── third-party ├── src │ ├── api │ ├── app -> different routes based on layouts │ │ ├── (auth) │ │ ├── (blank) │ │ ├── (component) │ │ ├── (dashboard) │ │ │ ├── apps │ │ │ ├── charts │ │ │ ├── ... │ │ ├── (simple) -> Layout for simple │ ├── components -> components used in different pages │ │ ├── @extended │ │ ├── cards │ │ ├── customization │ │ ├── logo │ │ ├── ... │ ├── contexts -> State context for Login and other │ ├── data -> Static data │ ├── hooks -> Custom hooks │ ├── layout │ │ ├── ComponentLayout -> Layout for components showcase │ │ ├── DashboardLayout -> Layout for Dashboard │ │ ├── SimpleLayout -> Layout for simple │ ├── menu-items -> menu items for each main menu │ │ ├── application.js │ │ ├── dashboard.js │ │ ├── ... │ ├── sections -> This contains different sections used only for pages │ ├── themes -> Contains application style and theme │ ├── types -> common types for Typescript. Exist only in Typescript │ ├── utils │ │ ├── locales -> different locale json files │ │ ├── route-guard -> Auth guard to prevent unexpected navigations │ │ ├── ... │ ├── views -> list of Next.js files and directory │ │ ├── app │ │ ├── dashboard │ │ ├── ... │ ├── config.ts -> Template constant value and live customization ├── eslint.config.mjs ├── .prettierrc ├── tsconfig.json ├── next.config.ts ├── package-lock.json -> Package lock file. ├── package.json -> Package json file. ├── README.md ├── yarn.lock -> yarn lock file. able-pro-material-next-js Copy .. ├── public │ ├── assets -> images in different directories │ │ ├── images │ │ │ ├── auth │ │ │ ├── cards │ │ │ ├── ... │ │ ├── third-party ├── src │ ├── api │ ├── app -> different routes based on layouts │ │ ├── (auth) │ │ ├── (blank) │ │ ├── (component) │ │ ├── (dashboard) │ │ │ ├── apps │ │ │ ├── charts │ │ │ ├── ... │ │ ├── (simple) -> Layout for simple │ ├── components -> components used in different pages │ │ ├── @extended │ │ ├── cards │ │ ├── customization │ │ ├── logo │ │ ├── ... │ ├── contexts -> State context for Login and other │ ├── data -> Static data │ ├── hooks -> Custom hooks │ ├── layout │ │ ├── ComponentLayout -> Layout for components showcase │ │ ├── DashboardLayout -> Layout for Dashboard │ │ ├── SimpleLayout -> Layout for simple │ ├── menu-items -> menu items for each main menu │ │ ├── application.js │ │ ├── dashboard.js │ │ ├── ... │ ├── sections -> This contains different sections used only for pages │ ├── themes -> Contains application style and theme │ ├── utils │ │ ├── locales -> different locale json files │ │ ├── route-guard -> Auth guard to prevent unexpected navigations │ │ ├── ... │ ├── views -> list of Next.js files and directory │ │ ├── app │ │ ├── dashboard │ │ ├── ... │ ├── config.js -> Template constant value and live customization ├── eslint.config.mjs ├── .prettierrc ├── jsconfig.json ├── next-env.d.js ├── next.config.js ├── package-lock.json -> Package lock file. ├── package.json -> Package json file. ├── README.md ├── yarn.lock -> yarn lock file. [PreviousQuick Start](https://phoenixcoded.gitbook.io/able-pro/nextjs/quick-start) [NextState Management](https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management) Last updated 1 month ago --- # Authentication | NextJS | Able Pro Able pro uses next-auth for authentication system. Please refer their official site for docs: [https://next-auth.js.org/providers](https://next-auth.js.org/providers) [PreviousState Management](https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management) [NextAxios API Calls](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls) Last updated 1 year ago --- # State Management | NextJS | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management#thesecontext-api) TheseContext API ----------------------------------------------------------------------------------------------------------- Context provides a way to pass data through the component tree without having to pass props down manually at every level. We are using context for login methods - `**JWT**` [](https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management#swr) SWR --------------------------------------------------------------------------------- SWR is a popular library used for data fetching and state management in React applications. Data fetching is covered in the Axios API calls section. Here, we are going to cover state management using SWR. Mantis is managing the state of the following using SWR 1. Snackbar states 2. Menu states 3. E-commerce Cart ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/state-management#id-1.-snackbar) 1\. Snackbar NEXT (TS) NEXT (JS) Snackbar is used to show notifications in the application. Whenever a component dispatches an action with data to show a snackbar, it appears in the app. The initial state of snackbar is being captured using useSWR hooks, and after that, we are mutating its state based on action calls. The following is the initial state: src/api/snackbar.ts Copy const initialState: SnackbarProps = { action: false, open: false, message: 'Note archived', anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, variant: 'default', alert: { color: 'primary', variant: 'filled' }, transition: 'Fade', close: false, actionButton: false, maxStack: 3, dense: false, iconVariant: 'usedefault' }; These values have been initialized using useSWR like below: src/api/snackbar.ts Copy export function useGetSnackbar() { const { data } = useSWR(endpoints.key, () => initialState, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo(() => ({ snackbar: data! }), [data]); return memoizedValue; } Now, how to read these values and update them as well. To read the values and listen, following the SWR hooks is sufficient in the component. Whenever any changes happen, it is activated like a redux selector and acts based on logic. src/components/@extended /Snackbar.tsx Copy ... import { closeSnackbar, useGetSnackbar } from 'api/snackbar'; ... // animation options const animation: KeyedObject = { SlideLeft: TransitionSlideLeft, SlideUp: TransitionSlideUp, SlideRight: TransitionSlideRight, SlideDown: TransitionSlideDown, Grow: GrowTransition, Fade }; // ==============================|| SNACKBAR ||============================== // export default function Snackbar() { const { snackbar } = useGetSnackbar(); ... ... }; To open the Snack bar, we need to change the value and mutate the state. Here is how it is done src/api/snackbar.ts Copy export function openSnackbar(snackbar: SnackbarProps) { // to update local state based on key const { action, open, message, anchorOrigin, variant, alert, transition, close, actionButton } = snackbar; mutate( endpoints.key, (currentSnackbar: any) => { return { ...currentSnackbar, action: action || initialState.action, open: open || initialState.open, message: message || initialState.message, anchorOrigin: anchorOrigin || initialState.anchorOrigin, variant: variant || initialState.variant, alert: { color: alert?.color || initialState.alert.color, variant: alert?.variant || initialState.alert.variant }, transition: transition || initialState.transition, close: close || initialState.close, actionButton: actionButton || initialState.actionButton }; }, false ); } Then the method _openSnackbar_ will be called from components to open the snackbar. src/views /apps/create.tsx Copy ... import { openSnackbar } from 'api/snackbar'; // types import { SnackbarProps } from 'types/snackbar'; ... // ==============================|| INVOICE - CREATE ||============================== // const Create = () => { ... const handlerCreate = (values: any) => { const newList: InvoiceList = { ... }; ... openSnackbar({ open: true, message: 'Invoice Added successfully', anchorOrigin: { vertical: 'top', horizontal: 'right' }, variant: 'alert', alert: { color: 'success' } } as SnackbarProps); ... }; return ( ... ); }; export default Create; Snackbar is used to show notifications in the application. Whenever a component dispatches an action with data to show a snackbar, it appears in the app. The initial state of snackbar is being captured using useSWR hooks, and after that, we are mutating its state based on action calls. The following is the initial state: src/api/snackbar.js Copy const initialState = { action: false, open: false, message: 'Note archived', anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, variant: 'default', alert: { color: 'primary', variant: 'filled' }, transition: 'Fade', close: false, actionButton: false, maxStack: 3, dense: false, iconVariant: 'usedefault' }; These values have been initialized using useSWR like below: src/api/snackbar.js Copy export function useGetSnackbar() { const { data } = useSWR(endpoints.key, () => initialState, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo(() => ({ snackbar: data! }), [data]); return memoizedValue; } Now, how to read these values and update them as well. To read the values and listen, following the SWR hooks is sufficient in the component. Whenever any changes happen, it is activated like a redux selector and acts based on logic. src/components/@extended /Snackbar.jsx Copy ... import { closeSnackbar, useGetSnackbar } from 'api/snackbar'; ... // animation options const animation = { SlideLeft: TransitionSlideLeft, SlideUp: TransitionSlideUp, SlideRight: TransitionSlideRight, SlideDown: TransitionSlideDown, Grow: GrowTransition, Fade }; // ==============================|| SNACKBAR ||============================== // export default function Snackbar() { const { snackbar } = useGetSnackbar(); ... ... }; To open the Snack bar, we need to change the value and mutate the state. Here is how it is done src/api/snackbar.js Copy export function openSnackbar(snackbar) { // to update local state based on key const { action, open, message, anchorOrigin, variant, alert, transition, close, actionButton } = snackbar; mutate( endpoints.key, (currentSnackbar) => { return { ...currentSnackbar, action: action || initialState.action, open: open || initialState.open, message: message || initialState.message, anchorOrigin: anchorOrigin || initialState.anchorOrigin, variant: variant || initialState.variant, alert: { color: alert?.color || initialState.alert.color, variant: alert?.variant || initialState.alert.variant }, transition: transition || initialState.transition, close: close || initialState.close, actionButton: actionButton || initialState.actionButton }; }, false ); } Then the method _openSnackbar_ will be called from components to open the snackbar. src/views /apps/InvoiceCreate.jsx Copy ... import { openSnackbar } from 'api/snackbar'; ... // ==============================|| INVOICE - CREATE ||============================== // function Create({ lists, invoiceMaster }) { ... const handlerCreate = (values) => { const newList: InvoiceList = { ... }; ... openSnackbar({ open: true, message: 'Invoice Added successfully', anchorOrigin: { vertical: 'top', horizontal: 'right' }, variant: 'alert', alert: { color: 'success' } }); ... }; return ( ... ); }; export default Create; [PreviousFolder Structure](https://phoenixcoded.gitbook.io/able-pro/nextjs/folder-structure) [NextAuthentication](https://phoenixcoded.gitbook.io/able-pro/nextjs/authentication) Last updated 1 month ago --- # Axios API Calls | NextJS | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls#axios-api-call-using-swr) Axios API call using SWR Product values have been initialized using useSWR with Axios fetcher, like below: NEXT (TS) NEXT (JS) src/api/products.ts Copy export function useGetRelatedProducts(id: string) { const URL = [endpoints.related, { id, endpoints: 'products' }]; const { data, isLoading, error, isValidating } = useSWR(URL, fetcherPost, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo( () => ({ relatedProducts: data as Products[], relatedProductsLoading: isLoading, relatedProductsError: error, relatedProductsValidating: isValidating, relatedProductsEmpty: !isLoading && !data?.length }), [data, error, isLoading, isValidating] ); return memoizedValue; } src/api/products.js Copy export function useGetRelatedProducts(id) { const URL = [endpoints.related, { id, endpoints: 'products' }]; const { data, isLoading, error, isValidating } = useSWR(URL, fetcherPost, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo( () => ({ relatedProducts: data, relatedProductsLoading: isLoading, relatedProductsError: error, relatedProductsValidating: isValidating, relatedProductsEmpty: !isLoading && !data?.length }), [data, error, isLoading, isValidating] ); return memoizedValue; } You can mutate the product list with an Axios call, like below, NEXT (TS) NEXT (JS) src/api/products.ts Copy export async function productFilter(filter: ProductsFilter) { const newProducts = await axios.post(endpoints.key + endpoints.filter, { filter }); // to update local state based on key mutate( endpoints.key + endpoints.list, (currentProducts: any) => { return { ...currentProducts, products: newProducts.data }; }, false ); } src/api/products.js Copy export async function productFilter(filter) { const newProducts = await axios.post(endpoints.key + endpoints.filter, { filter }); // to update local state based on key mutate( endpoints.key + endpoints.list, (currentProducts) => { return { ...currentProducts, products: newProducts.data }; }, false ); } ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls#set-the-default-axios-baseurl-for-calling-the-api) Set the default axios baseURL for calling the API Open `next.config.js` file and edit NEXT\_APP\_API\_URL. next.config.js Copy env: { NEXT_APP_API_URL: .. } Axios has been configured in the folder `**src\utils\axios**` ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls#example-1-with-baseurl) Example 1: With baseUrl NEXT (TS) NEXT (JS) src/utils/axios.ts Copy import axios, { AxiosRequestConfig } from 'axios'; import { getSession } from 'next-auth/react'; const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' }); // ==============================|| AXIOS - FOR MOCK SERVICES ||============================== // axiosServices.interceptors.request.use( async (config) => { const session = await getSession(); if (session?.token.accessToken) { config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`; } return config; }, (error) => { return Promise.reject(error); } ); src/utils/axios.js Copy import axios from 'axios'; import { getSession } from 'next-auth/react'; const axiosServices = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL || 'http://localhost:3010/' }); // ==============================|| AXIOS - FOR MOCK SERVICES ||============================== // axiosServices.interceptors.request.use( async (config) => { const session = await getSession(); if (session?.token.accessToken) { config.headers['Authorization'] = `Bearer ${session?.token.accessToken}`; } return config; }, (error) => { return Promise.reject(error); } ); ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls#example-2-without-baseurl) Example 2: Without baseUrl You can set the entire URL in the Axios request. Do not use common Axios instances `**src\utils\axios**` instead, use the Axios library. NEXT (TS) NEXT (JS) src\\utils\\axios.ts Copy import { useCallback, useState } from 'react'; // third-party import axios from 'axios'; // ==============================|| AXIOS - USER ||============================== // function UserList() { const [users, setUsers] = useState([]); const getUsers = useCallback(async () => { try { const response = await axios.get('https://www.domain-xyz.com/api/users'); setUsers(response.data.users); } catch (error) { console.log(error); } }, []); useEffect(() => { getUsers(); }, [getUsers]); return (
{users.map((user: UserProfile[], index: number) => (
{user.name}
))}
); } src\\utils\\axios.js Copy import { useCallback, useState } from 'react'; // third-party import axios from 'axios'; // ==============================|| AXIOS - USER ||============================== // function UserList() { const [users, setUsers] = useState([]); const getUsers = useCallback(async () => { try { const response = await axios.get('https://www.domain-xyz.com/api/users'); setUsers(response.data.users); } catch (error) { console.log(error); } }, []); useEffect(() => { getUsers(); }, [getUsers]); return (
{users.map((user, index) => (
{user.name}
))}
); } [PreviousAuthentication](https://phoenixcoded.gitbook.io/able-pro/nextjs/authentication) [NextInternationalization](https://phoenixcoded.gitbook.io/able-pro/nextjs/internationalization) Last updated 1 month ago --- # Internationalization | NextJS | Able Pro Able Pro supports four types of international languages ('**en**' - English, '**fr**' - French, '**ro**' - Romanian, '**zh**' - Chinese). You can switch language from the header bar. We internationalise the main menu for all four languages. When you change it from the header, you will see the effect there. If you want to configure one more language or set a default language, then continue reading below... [](https://phoenixcoded.gitbook.io/able-pro/nextjs/internationalization#how-does-it-work) How does it work? ---------------------------------------------------------------------------------------------------------------- Data for locale files exists at `**src\utils\locales**` .json file Copy { "accordion": "Accordion", "account-profile": "Account Profile", "add-new-product": "Add New Product", ... ... } To change the Locale, open the file `**src\config**` file and set language NEXT (TS) NEXT (JS) src\\config.ts Copy // types import { DefaultConfigProps } from 'types/config'; ... // ==============================|| THEME CONFIG ||============================== // const config: DefaultConfigProps = { ... i18n: 'en', ... }; export default config; src\\config.js Copy ... ... // ==============================|| THEME CONFIG ||============================== // const config = { ... i18n: 'en', ... }; export default config; [PreviousAxios API Calls](https://phoenixcoded.gitbook.io/able-pro/nextjs/axios-api-calls) [NextProject Configuration](https://phoenixcoded.gitbook.io/able-pro/nextjs/project-configuration) Last updated 3 months ago --- # Color Presets | NextJS | Able Pro Able Pro comes up with 6+ theme colour presets. You can now change the available colour presets by doing the following steps: Colour Preset files are available in `**src\themes\theme\**` directory. NEXT (TS) NEXT (JS) Copy ... ├── default.ts ├── theme1.ts ├── .. ├── .. ├── .. ├── theme8.ts Copy ... ├── default.js ├── theme1.js ├── .. ├── .. ├── .. ├── theme8.js Edit & choose your desired preset colour setting in `**src\config**` The file. Change the `**presetColor**` value to `theme1, theme2 to theme6` NEXT (TS) NEXT (JS) Copy // types import { DefaultConfigProps } from 'types/config'; // ==============================|| THEME CONSTANT ||============================== // ... ... // ==============================|| THEME CONFIG ||============================== // const config: DefaultConfigProps = { ... presetColor: 'default', ... }; export default config; Copy // ==============================|| THEME CONSTANT ||============================== // ... ... // ==============================|| THEME CONFIG ||============================== // const config = { ... presetColor: 'default', ... }; export default config; [PreviousProject Configuration](https://phoenixcoded.gitbook.io/able-pro/nextjs/project-configuration) [NextTheme/Style Configuration](https://phoenixcoded.gitbook.io/able-pro/nextjs/theme-style-configuration) Last updated 3 months ago --- # Project Configuration | NextJS | Able Pro Able Pro has a single source of truth for the default configuration, which allows users to manage it effectively. It also makes it scalable for new configurations. You can set configs like font, border, theme layout, locale, etc. All those can be configured at `**src/config**` **fontFamily** inter string set font family **mode** light string `light, dark, auto` **i18n** en string `en` - English `fr` - français `ro` - Română `zh` - 中国人 **menuOrientation** vertical string `vertical`, `horizontal` **menuCaption** true boolean `true`, `false` **themeDirection** ltr string `ltr`, `rtl` **miniDrawer** false boolean `true`, `false` **container** true boolean see layout in stretch **presetColor** default string different preset for theme. **themeContrast** false boolean set body background. NEXT (TS) NEXT (JS) src/config.ts Copy // next import { Inter } from 'next/font/google'; // types import { DefaultConfigProps } from 'types/config'; // ==============================|| THEME CONSTANT ||============================== // export const facebookColor = '#3b5998'; export const linkedInColor = '#0e76a8'; export const APP_DEFAULT_PATH = '/dashboard/default'; export const HORIZONTAL_MAX_ITEM = 8; export const DRAWER_WIDTH = 280; export const MINI_DRAWER_WIDTH = 90; export const HEADER_HEIGHT = 74; export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 }; const inter = Inter({ subsets: ['latin'], fallback: ['sans-serif'], weight: ['300', '400', '500', '700'], adjustFontFallback: false }); export enum ThemeMode { LIGHT = 'light', DARK = 'dark', AUTO = 'auto' } export enum MenuOrientation { VERTICAL = 'vertical', HORIZONTAL = 'horizontal' } export enum ThemeDirection { LTR = 'ltr', RTL = 'rtl' } export enum NavActionType { FUNCTION = 'function', LINK = 'link' } export enum Gender { MALE = 'Male', FEMALE = 'Female' } export enum DropzopType { default = 'DEFAULT', standard = 'STANDARD' } // ==============================|| THEME CONFIG ||============================== // const config: DefaultConfigProps = { fontFamily: inter.style.fontFamily, i18n: 'en', menuOrientation: MenuOrientation.VERTICAL, menuCaption: true, miniDrawer: false, container: true, mode: ThemeMode.LIGHT, presetColor: 'default', themeDirection: ThemeDirection.LTR, themeContrast: false }; export default config; src/config.js Copy // next import { Inter } from 'next/font/google'; // ==============================|| THEME CONSTANT ||============================== // export const facebookColor = '#3b5998'; export const linkedInColor = '#0e76a8'; export const APP_DEFAULT_PATH = '/dashboard/default'; export const HORIZONTAL_MAX_ITEM = 8; export const DRAWER_WIDTH = 280; export const MINI_DRAWER_WIDTH = 90; export const HEADER_HEIGHT = 74; export const GRID_COMMON_SPACING = { xs: 2, md: 2.5 }; const inter = Inter({ subsets: ['latin'], fallback: ['sans-serif'], weight: ['300', '400', '500', '700'], adjustFontFallback: false }); export let ThemeMode; (function (ThemeMode) { ThemeMode['LIGHT'] = 'light'; ThemeMode['DARK'] = 'dark'; ThemeMode['AUTO'] = 'auto'; })(ThemeMode || (ThemeMode = {})); export let MenuOrientation; (function (MenuOrientation) { MenuOrientation['VERTICAL'] = 'vertical'; MenuOrientation['HORIZONTAL'] = 'horizontal'; })(MenuOrientation || (MenuOrientation = {})); export let ThemeDirection; (function (ThemeDirection) { ThemeDirection['LTR'] = 'ltr'; ThemeDirection['RTL'] = 'rtl'; })(ThemeDirection || (ThemeDirection = {})); export let NavActionType; (function (NavActionType) { NavActionType['FUNCTION'] = 'function'; NavActionType['LINK'] = 'link'; })(NavActionType || (NavActionType = {})); export let Gender; (function (Gender) { Gender['MALE'] = 'Male'; Gender['FEMALE'] = 'Female'; })(Gender || (Gender = {})); export let DropzopType; (function (DropzopType) { DropzopType['default'] = 'DEFAULT'; DropzopType['standard'] = 'STANDARD'; })(DropzopType || (DropzopType = {})); // ==============================|| THEME CONFIG ||============================== // const config = { fontFamily: inter.style.fontFamily, i18n: 'en', menuOrientation: MenuOrientation.VERTICAL, menuCaption: true, miniDrawer: false, container: true, mode: ThemeMode.LIGHT, presetColor: 'default', themeDirection: ThemeDirection.LTR, themeContrast: false }; export default config; [PreviousInternationalization](https://phoenixcoded.gitbook.io/able-pro/nextjs/internationalization) [NextColor Presets](https://phoenixcoded.gitbook.io/able-pro/nextjs/color-presets) Last updated 1 month ago --- # Figma | NextJS | Able Pro #### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/figma#how-to-apply-dark-light-colors-using-themer-plugins) How to apply Dark/Light colors using Themer Plugins Video Tutorial - [http://bit.ly/3UBiRR9](http://bit.ly/3UBiRR9) #### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/figma#setup-the-themer-plugin) Setup the Themer Plugin 1. Import & Open **Ablepro-color-palette.fig** file into Figma. 2. Goto Menu -> Libraries -> Find and Publish Ablepro-color-palette -> Publish styles 3. Try out the free Figma **Themer** Plugins from [Figma Community](https://www.figma.com/community/plugin/731176732337510831) . 4. Open the Themer Plugin Dialog and follow the steps below. * Save the JSONBin API key after setting up the account from [jasonbin.io](https://codedthemes.gitbook.io/mantis/v1.1.0/) * Create a theme * Step 1 - Select **Color Styles** * Step 2 - Select **Local styles** * Step 3 - **Checkmark** the "Create multiple themes from ....." * Hit the **Create theme** button. #### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/figma#troubleshoot) **Troubleshoot** **Problem -** None of the styles are published. Publish them to continue. **Resolution -** Follow Step 2. **Problem** **\-** Stuck in Themer Plugin? **Resolution -** Reset Themer from Dialog Settings -> Reset Themer and follow step 4 **How to apply Dark/Light colors?** 1. Import & Open **ablepro-v9.fig** into Figma. 2. Go to Menu -> Libraries -> Find and **Activate** ablepro-color-palette libraries. 3. **Open** Themer Plugins Menu -> Plugins -> Themer 4. Remain Open the Themer **Dialog**. 1. Select any existing frame(s)/layer(s) 2. From the Themer Dialog, select **Night** and hit the **Apply to selection** button for Dark Layout. 3. From the Themer Dialog, select **Day** and hit the **Apply to selection** button for Light Layout. It may take a longer loading time to apply styles using Themer Plugins, depending on the selected number of frames/layers. [PreviousRemove Auth](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-auth) [NextIntegration](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration) Last updated 1 month ago --- # Support | NextJS | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#please-note-that-our-support-is-limited-only-to-those-who-have-purchased-our-item) Please note that our support is limited only to those who have purchased our item. We are trying our best to let Able Pro run as it should be (ie. like DEMO SITE). But we CAN NOT provide any customization on the theme. Thank you so much! [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#before-submitting-the-ticket) Before submitting the ticket -------------------------------------------------------------------------------------------------------------------------- 1. Make sure that you are running the latest version of the theme. 2. Make sure that you deeply checked the theme's documentation and try to search for public tickets in case of someone else asked the same question before. 3. Please watch Template Introduction, folder structure, and customization videos to see if you get the answer. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#while-submitting-the-ticket) While submitting the ticket ------------------------------------------------------------------------------------------------------------------------ Please be as specific as possible when starting a new ticket, it really helps us to identify the root of your problem when you provide a link to your site, a screenshot of your error message, a snippet, or all of the above. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#after-submitting-the-ticket) After submitting the ticket ------------------------------------------------------------------------------------------------------------------------ * Normally, we will get back to customers in 12-24 hours on normal business days. * The tickets will prioritize as came to us, first come first serve basis. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#while-submitting-the-ticket-1) While submitting the ticket -------------------------------------------------------------------------------------------------------------------------- Please be as specific as possible when starting a new ticket, it really helps us to identify the root of your problem when you provide a link to your site, a screenshot of your error message, a snippet, or all of the above. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#after-submitting-the-ticket-1) After submitting the ticket -------------------------------------------------------------------------------------------------------------------------- * Normally, we will get back to customers in 12-24 hours on normal business days. * The tickets will prioritize as came to us, first come first serve basis. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/support#support) Support -------------------------------------------------------------------------------- Please submit your ticket to [https://phoenixcoded.authordesk.app/](https://phoenixcoded.authordesk.app/) . We would love to hear from you anytime. [PreviousRoadmap](https://phoenixcoded.gitbook.io/able-pro/nextjs/roadmap) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog) Last updated 1 year ago --- # Changelog | NextJS | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v4.1.0-15-09-2025) v4.1.0 - 15-09-2025 -------------------------------------------------------------------------------------------------------- * New Applications * File manager * Social Profile * Mail * Package upgrades * Upgraded Yarn to version 4.9.4 * Prefetch routes & Google Fonts for better performance * Optimised TanStack Table implementation * Improved MUI components using slotProps * Fixed customization * Theme Mode * Theme Direction * Theme Contrast * Fixed apexchart legend issue * Other third-party packages were updated to their latest compatible versions * General bug fixes and performance improvements [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v4.0.0-11-07-2025) v4.0.0 - 11-07-2025 -------------------------------------------------------------------------------------------------------- * Upgrades & Improvements * Upgraded to **React 19** * Upgraded to **MUIv7** * Upgraded to **Packages** * Bug Fixes [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v3.0.0-20-03-2025) v3.0.0 - 20-03-2025 -------------------------------------------------------------------------------------------------------- * New Features & Enhancements: * Added **Finance Dashboard** * Added **Figma Section** on the landing page * Added **Admin Panel** * Added **Online Course Module** * Added **Membership Module** * Added **Helpdesk Module** * Upgrades & Improvements: * Upgraded to **MUI v6** * Upgraded **ESLint v9** * Upgraded **Next 15** * Upgraded to **Yarn 4** and set up **Yarn Corepack** * Bug Fixes & Optimizations: * General **bug fixes** * Fixed **Scrollbar issue** * Improved **Scrollbar support with RTL** * Fixed **Grid spacing issues** * Optimized **imports and comments** * Enhanced **documentation** [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v2.0.1-16-09-2024) v2.0.1- 16-09-2024 ------------------------------------------------------------------------------------------------------- * Minor UI Updates [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v2.0.0-13-08-2024) v2.0.0- 13-08-2024 ------------------------------------------------------------------------------------------------------- * Migrate to react table v8      * Added Full-Screen Toggle * Map * Menu Update * Set yarn v4 * bug fix * Added Techstack info [](https://phoenixcoded.gitbook.io/able-pro/nextjs/changelog#v1.0.0-release-08-02-2023) v1.0.0 - Release (08-02-2023) -------------------------------------------------------------------------------------------------------------------------- * Revamped version with new design [PreviousSupport](https://phoenixcoded.gitbook.io/able-pro/nextjs/support) Last updated 1 month ago --- # Dependencies | NextJS | Able Pro NEXT (TS) NEXT(JS) ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies#dependencies) Dependencies Package Name Version Link @date-io/date-fns `3.2.1` [NPM LINK](https://www.npmjs.com/package/@date-io/date-fns) @dnd-kit/core `6.3.1` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/core) @dnd-kit/modifiers `9.0.0` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/modifiers) @dnd-kit/sortable `10.0.0` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/sortable) @emotion/cache `11.14.0` [NPM LINK](https://www.npmjs.com/package/@emotion/cache) @emotion/react `11.14.0` [NPM LINK](https://www.npmjs.com/package/@emotion/react) @emotion/styled `11.14.1` [NPM LINK](https://www.npmjs.com/package/@emotion/styled) @fullcalendar/common `5.11.5` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/common) @fullcalendar/core `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/core) @fullcalendar/daygrid `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/daygrid) @fullcalendar/interaction `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/interaction) @fullcalendar/list `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/list) @fullcalendar/react `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/react) @fullcalendar/timegrid `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/timegrid) @fullcalendar/timeline `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/timeline) @hello-pangea/dnd `18.0.1` [NPM LINK](https://www.npmjs.com/package/@hello-pangea/dnd) @mui/lab `7.0.0-beta.17` [NPM LINK](https://www.npmjs.com/package/@mui/lab) @mui/material `7.3.2` [NPM LINK](https://www.npmjs.com/package/@mui/material) @mui/system `7.3.2` [NPM LINK](https://www.npmjs.com/package/@mui/system) @mui/x-date-pickers `8.11.0` [NPM LINK](https://www.npmjs.com/package/@mui/x-date-pickers) @mui/x-tree-view `8.11.0` [NPM LINK](https://www.npmjs.com/package/@mui/x-tree-view) @react-pdf/renderer `4.3.0` [NPM LINK](https://www.npmjs.com/package/@react-pdf/renderer) @svgr/webpack `8.1.0` [NPM LINK](https://www.npmjs.com/package/@svgr/webpack) @tanstack/match-sorter-utils `8.19.4` [NPM LINK](https://www.npmjs.com/package/@tanstack/match-sorter-utils) @tanstack/react-query `5.85.8` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-query) @tanstack/react-table `8.21.3` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-table) @tanstack/react-virtual `3.13.12` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-virtual) @wandersonalwes/iconsax-react `0.0.10` [NPM LINK](https://www.npmjs.com/package/@wandersonalwes/iconsax-react) apexcharts `5.3.4` [NPM LINK](https://www.npmjs.com/package/apexcharts) autosuggest-highlight `3.3.4` [NPM LINK](https://www.npmjs.com/package/autosuggest-highlight) axios `1.11.0` [NPM LINK](https://www.npmjs.com/package/axios) chance `1.1.13` [NPM LINK](https://www.npmjs.com/package/chance) copy-to-clipboard `3.3.3` [NPM LINK](https://www.npmjs.com/package/copy-to-clipboard) currency.js `2.0.4` [NPM LINK](https://www.npmjs.com/search?q=currency) date-fns `4.1.0` [NPM LINK](https://www.npmjs.com/package/date-fns) dayjs `1.11.18` [NPM LINK](https://www.npmjs.com/package/dayjs) draft-js `0.11.7` [NPM LINK](https://www.npmjs.com/package/draft-js) emoji-picker-react `4.13.2` [NPM LINK](https://www.npmjs.com/package/emoji-picker-react) formik `2.4.6` [NPM LINK](https://www.npmjs.com/package/formik) framer-motion `12.23.12` [NPM LINK](https://www.npmjs.com/package/framer-motion) history `5.3.0` [NPM LINK](https://www.npmjs.com/package/history) lodash-es `4.17.21` [NPM LINK](https://www.npmjs.com/package/lodash-es) mapbox-gl `3.14.0` [NPM LINK](https://www.npmjs.com/package/mapbox-gl) match-sorter `8.1.0` [NPM LINK](https://www.npmjs.com/package/match-sorter) next `15.5.2` [NPM LINK](https://www.npmjs.com/package/next) next-auth `4.24.11` [NPM LINK](https://www.npmjs.com/package/next-auth) notistack `3.0.2` [NPM LINK](https://www.npmjs.com/package/notistack) react `19.1.1` [NPM LINK](https://www.npmjs.com/package/react) react-apexcharts `1.7.0` [NPM LINK](https://www.npmjs.com/package/react-apexcharts) react-csv `2.2.2` [NPM LINK](https://www.npmjs.com/package/react-csv) react-device-detect `2.2.3` [NPM LINK](https://www.npmjs.com/package/react-device-detect) react-dom `19.1.1` [NPM LINK](https://www.npmjs.com/package/react-dom) react-draggable `4.5.0` [NPM LINK](https://www.npmjs.com/package/react-draggable) react-dropzone `14.3.8` [NPM LINK](https://www.npmjs.com/package/react-dropzone) react-fast-marquee `1.6.5` [NPM LINK](https://www.npmjs.com/package/react-fast-marquee) react-google-recaptcha `3.1.0` [NPM LINK](https://www.npmjs.com/package/react-google-recaptcha) react-intersection-observer `9.16.0` [NPM LINK](https://www.npmjs.com/package/react-intersection-observer) react-intl `7.1.11` [NPM LINK](https://www.npmjs.com/package/react-intl) react-map-gl `8.0.4` [NPM LINK](https://www.npmjs.com/package/react-map-gl) react-number-format `5.4.4` [NPM LINK](https://www.npmjs.com/package/react-number-format) react-organizational-chart `2.2.1` [NPM LINK](https://www.npmjs.com/package/react-organizational-chart) react-otp-input `3.1.1` [NPM LINK](https://www.npmjs.com/package/react-otp-input) react-quill-new `3.6.0` [NPM LINK](https://www.npmjs.com/package/react-quill-new) react-slick `0.31.0` [NPM LINK](https://www.npmjs.com/package/react-slick) react-syntax-highlighter `15.6.6` [NPM LINK](https://www.npmjs.com/package/react-syntax-highlighter) react-timer-hook `4.0.5` [NPM LINK](https://www.npmjs.com/package/react-timer-hook) react-to-print `3.1.1` [NPM LINK](https://www.npmjs.com/package/react-to-print) react-window `2.0.2` [NPM LINK](https://www.npmjs.com/package/react-window) react-zoom-pan-pinch `3.7.0` [NPM LINK](https://www.npmjs.com/package/react-zoom-pan-pinch) simplebar-react `3.3.2` [NPM LINK](https://www.npmjs.com/package/simplebar-react) slick-carousel `1.8.1` [NPM LINK](https://www.npmjs.com/package/slick-carousel) styled-jsx `5.1.7` [NPM LINK](https://www.npmjs.com/package/styled-jsx) stylis-plugin-rtl `2.1.1` [NPM LINK](https://www.npmjs.com/package/stylis-plugin-rtl) swr `2.3.6` [NPM LINK](https://www.npmjs.com/package/swr) use-places-autocomplete `4.0.1` [NPM LINK](https://www.npmjs.com/package/use-places-autocomplete) web-vitals `5.1.0` [NPM LINK](https://www.npmjs.com/package/web-vitals) yup `1.7.0` [NPM LINK](https://www.npmjs.com/package/yup) ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies#development-dependencies) Development Dependencies Package Name Version Link @eslint/compat `1.3.2` [NPM LINK](https://www.npmjs.com/package/@eslint/compat) @eslint/eslintrc `3.3.1` [NPM LINK](https://www.npmjs.com/package/@eslint/eslintrc) @eslint/js `9.34.0` [NPM LINK](https://www.npmjs.com/package/@eslint/js) @types/autosuggest-highlight `3.2.3` [NPM LINK](https://www.npmjs.com/package/@types/autosuggest-highlight) @types/chance `1.1.7` [NPM LINK](https://www.npmjs.com/package/@types/chance) @types/draft-js `0.11.18` [NPM LINK](https://www.npmjs.com/package/@types/draft-js) @types/lodash-es `4.17.12` [NPM LINK](https://www.npmjs.com/package/@types/lodash-es) @types/mapbox-gl `3.4.1` [NPM LINK](https://www.npmjs.com/package/@types/mapbox-gl) @types/node `24.3.0` [NPM LINK](https://www.npmjs.com/package/@types/node) @types/react `19.1.12` [NPM LINK](https://www.npmjs.com/package/@types/react) @types/react-csv `1.1.10` [NPM LINK](https://www.npmjs.com/package/@types/react-csv) @types/react-dom `19.1.9` [NPM LINK](https://www.npmjs.com/package/@types/react-dom) @types/react-google-recaptcha `2.1.9` [NPM LINK](https://www.npmjs.com/package/@types/react-google-recaptcha?activeTab=dependencies) @types/react-slick `0.23.13` [NPM LINK](https://www.npmjs.com/package/@types/react-slick) @types/react-syntax-highlighter `15.5.13` [NPM LINK](https://www.npmjs.com/package/@types/react-syntax-highlighter) @types/react-window `1.8.8` [NPM LINK](https://www.npmjs.com/package/@types/react-window) @types/webpack-env `1.18.8` [NPM LINK](https://www.npmjs.com/package/@types/webpack-env) @typescript-eslint/eslint-plugin `8.41.0` [NPM LINK](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin) @typescript-eslint/parser `8.41.0` [NPM LINK](https://www.npmjs.com/package/@typescript-eslint/parser) eslint `9.34.0` [NPM LINK](https://www.npmjs.com/package/eslint) eslint-config-next `15.5.2` [NPM LINK](https://www.npmjs.com/package/eslint-config-next) eslint-config-prettier `10.1.8` [NPM LINK](https://www.npmjs.com/package/eslint-config-prettier) eslint-plugin-prettier `5.5.4` [NPM LINK](https://www.npmjs.com/package/eslint-plugin-prettier) immutable `5.1.3` [NPM LINK](https://www.npmjs.com/package/immutable) prettier `3.6.2` [NPM LINK](https://www.npmjs.com/package/prettier) typescript `5.9.2` [NPM LINK](https://www.npmjs.com/package/typescript) ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies#dependencies-1) Dependencies Package Name Version Link @date-io/date-fns `3.2.1` [NPM LINK](https://www.npmjs.com/package/@date-io/date-fns) @dnd-kit/core `6.3.1` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/core) @dnd-kit/modifiers `9.0.0` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/modifiers) @dnd-kit/sortable `10.0.0` [NPM LINK](https://www.npmjs.com/package/@dnd-kit/sortable) @emotion/cache `11.14.0` [NPM LINK](https://www.npmjs.com/package/@emotion/cache) @emotion/react `11.14.0` [NPM LINK](https://www.npmjs.com/package/@emotion/react) @emotion/styled `11.14.1` [NPM LINK](https://www.npmjs.com/package/@emotion/styled) @fullcalendar/common `5.11.5` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/common) @fullcalendar/core `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/core) @fullcalendar/daygrid `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/daygrid) @fullcalendar/interaction `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/interaction) @fullcalendar/list `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/list) @fullcalendar/react `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/react) @fullcalendar/timegrid `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/timegrid) @fullcalendar/timeline `6.1.19` [NPM LINK](https://www.npmjs.com/package/@fullcalendar/timeline) @hello-pangea/dnd `18.0.1` [NPM LINK](https://www.npmjs.com/package/@hello-pangea/dnd) @mui/lab `7.0.0-beta.17` [NPM LINK](https://www.npmjs.com/package/@mui/lab) @mui/material `7.3.2` [NPM LINK](https://www.npmjs.com/package/@mui/material) @mui/system `7.3.2` [NPM LINK](https://www.npmjs.com/package/@mui/system) @mui/x-date-pickers `8.11.0` [NPM LINK](https://www.npmjs.com/package/@mui/x-date-pickers) @mui/x-tree-view `8.11.0` [NPM LINK](https://www.npmjs.com/package/@mui/x-tree-view) @react-pdf/renderer `4.3.0` [NPM LINK](https://www.npmjs.com/package/@react-pdf/renderer) @svgr/webpack `8.1.0` [NPM LINK](https://www.npmjs.com/package/@svgr/webpack) @tanstack/match-sorter-utils `8.19.4` [NPM LINK](https://www.npmjs.com/package/@tanstack/match-sorter-utils) @tanstack/react-query `5.85.8` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-query) @tanstack/react-table `8.21.3` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-table) @tanstack/react-virtual `3.13.10` [NPM LINK](https://www.npmjs.com/package/@tanstack/react-virtual) @wandersonalwes/iconsax-react `0.0.10` [NPM LINK](https://www.npmjs.com/package/@wandersonalwes/iconsax-react) apexcharts `4.7.0` [NPM LINK](https://www.npmjs.com/package/apexcharts) autosuggest-highlight `3.3.4` [NPM LINK](https://www.npmjs.com/package/autosuggest-highlight) axios `1.10.0` [NPM LINK](https://www.npmjs.com/package/axios) chance `1.1.13` [NPM LINK](https://www.npmjs.com/package/chance) copy-to-clipboard `3.3.3` [NPM LINK](https://www.npmjs.com/package/copy-to-clipboard) currency.js `2.0.4` [NPM LINK](https://www.npmjs.com/search?q=currency) date-fns `4.1.0` [NPM LINK](https://www.npmjs.com/package/date-fns) dayjs `1.11.18` [NPM LINK](https://www.npmjs.com/package/dayjs) draft-js `0.11.7` [NPM LINK](https://www.npmjs.com/package/draft-js) emoji-picker-react `4.13.2` [NPM LINK](https://www.npmjs.com/package/emoji-picker-react) formik `2.4.6` [NPM LINK](https://www.npmjs.com/package/formik) framer-motion `12.23.12` [NPM LINK](https://www.npmjs.com/package/framer-motion) history `5.3.0` [NPM LINK](https://www.npmjs.com/package/history) lodash-es `4.17.21` [NPM LINK](https://www.npmjs.com/package/lodash-es) mapbox-gl `3.14.0` [NPM LINK](https://www.npmjs.com/package/mapbox-gl) match-sorter `8.1.0` [NPM LINK](https://www.npmjs.com/package/match-sorter) next `15.5.2` [NPM LINK](https://www.npmjs.com/package/next) next-auth `4.24.11` [NPM LINK](https://www.npmjs.com/package/next-auth) notistack `3.0.2` [NPM LINK](https://www.npmjs.com/package/notistack) react `19.1.1` [NPM LINK](https://www.npmjs.com/package/react) react-apexcharts `1.7.0` [NPM LINK](https://www.npmjs.com/package/react-apexcharts) react-csv `2.2.2` [NPM LINK](https://www.npmjs.com/package/react-csv) react-device-detect `2.2.3` [NPM LINK](https://www.npmjs.com/package/react-device-detect) react-dom `19.1.1` [NPM LINK](https://www.npmjs.com/package/react-dom) react-draggable `4.5.0` [NPM LINK](https://www.npmjs.com/package/react-draggable) react-dropzone `14.3.8` [NPM LINK](https://www.npmjs.com/package/react-dropzone) react-fast-marquee `1.6.5` [NPM LINK](https://www.npmjs.com/package/react-fast-marquee) react-google-recaptcha `3.1.0` [NPM LINK](https://www.npmjs.com/package/react-google-recaptcha) react-intersection-observer `9.16.0` [NPM LINK](https://www.npmjs.com/package/react-intersection-observer) react-intl `7.1.11` [NPM LINK](https://www.npmjs.com/package/react-intl) react-map-gl `8.0.4` [NPM LINK](https://www.npmjs.com/package/react-map-gl) react-number-format `5.4.4` [NPM LINK](https://www.npmjs.com/package/react-number-format) react-organizational-chart `2.2.1` [NPM LINK](https://www.npmjs.com/package/react-organizational-chart) react-otp-input `3.1.1` [NPM LINK](https://www.npmjs.com/package/react-otp-input) react-quill-new `3.6.0` [NPM LINK](https://www.npmjs.com/package/react-quill-new) react-slick `0.31.0` [NPM LINK](https://www.npmjs.com/package/react-slick) react-syntax-highlighter `15.6.6` [NPM LINK](https://www.npmjs.com/package/react-syntax-highlighter) react-timer-hook `4.0.5` [NPM LINK](https://www.npmjs.com/package/react-timer-hook) react-to-print `3.1.1` [NPM LINK](https://www.npmjs.com/package/react-to-print) react-window `2.0.2` [NPM LINK](https://www.npmjs.com/package/react-window) react-zoom-pan-pinch `3.7.0` [NPM LINK](https://www.npmjs.com/package/react-zoom-pan-pinch) simplebar-react `3.3.2` [NPM LINK](https://www.npmjs.com/package/simplebar-react) slick-carousel `1.8.1` [NPM LINK](https://www.npmjs.com/package/slick-carousel) styled-jsx `5.1.7` [NPM LINK](https://www.npmjs.com/package/styled-jsx) stylis-plugin-rtl `2.1.1` [NPM LINK](https://www.npmjs.com/package/stylis-plugin-rtl) swr `2.3.6` [NPM LINK](https://www.npmjs.com/package/swr) use-places-autocomplete `4.0.1` [NPM LINK](https://www.npmjs.com/package/use-places-autocomplete) web-vitals `5.1.0` [NPM LINK](https://www.npmjs.com/package/web-vitals) yup `1.7.0` [NPM LINK](https://www.npmjs.com/package/yup) ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies#development-dependencies-1) Development Dependencies Package Name Version Link @eslint/compat `1.3.2` [NPM LINK](https://www.npmjs.com/package/@eslint/compat) @eslint/eslintrc `3.3.1` [NPM LINK](https://www.npmjs.com/package/@eslint/eslintrc) @eslint/js `9.34.0` [NPM LINK](https://www.npmjs.com/package/@eslint/js) eslint `9.34.0` [NPM LINK](https://www.npmjs.com/package/eslint) eslint-config-prettier `10.1.8` [NPM LINK](https://www.npmjs.com/package/eslint-config-prettier) eslint-plugin-prettier `5.5.4` [NPM LINK](https://www.npmjs.com/package/eslint-plugin-prettier) immutable `5.1.3` [NPM LINK](https://www.npmjs.com/package/immutable) prettier `3.6.2` [NPM LINK](https://www.npmjs.com/package/prettier) eslint-plugin-jsx-a11y `6.10.2` [NPM LINK](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) eslint-plugin-react `7.37.5` [NPM LINK](https://www.npmjs.com/package/eslint-plugin-react) eslint-plugin-react-hooks `5.2.0` [NPM LINK](https://www.npmjs.com/package/eslint-plugin-react-hooks) [PreviousComparison](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/comparison) [NextRoadmap](https://phoenixcoded.gitbook.io/able-pro/nextjs/roadmap) Last updated 1 month ago --- # Login as First Page | NextJS | Able Pro This section explains how to set the Login page as the default starting page, skipping the landing page, for cases where it is not needed. * Update the code at route _**full-version/src/app/page**_ NEXT (TS) NEXT (JS) src/app/page.tsx Copy // project-imports import GuestGuard from 'utils/route-guard/GuestGuard'; import LoginPage from 'app/(auth)/login/page'; export default function Login() { return ( ); } src/app/page.jsx Copy // project-imports import GuestGuard from 'utils/route-guard/GuestGuard'; import LoginPage from 'app/(auth)/login/page'; export default function Login() { return ( ); } [PreviousHow to](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to) [NextDashboard as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/dashboard-as-first-page) Last updated 1 month ago --- # Changelog | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.8.0-15-09-2025) Version 9.8.0 - 15-09-2025 --------------------------------------------------------------------------------------------------------------- * No design updates * For technical updates, please check individual docs [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.7.1-11-07-2025) Version 9.7.1 - 11-07-2025 --------------------------------------------------------------------------------------------------------------- * No design updates * For technical updates, please check individual docs [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.7.0-20-03-2025) Version 9.7.0 - 20-03-2025 --------------------------------------------------------------------------------------------------------------- * Added Figma Section * Bug Fixed * Mui v6 * Next 15 * Eslint 9 [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.6.0-14-12-2024) Version 9.6.0 - 14-12-2024 --------------------------------------------------------------------------------------------------------------- * Code Improvements * Package Updates [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.5.1-16-09-2024) Version 9.5.1 - 16-09-2024 --------------------------------------------------------------------------------------------------------------- * Minor UI Updates * Added Tailwind CSS HTML Package. [](https://phoenixcoded.gitbook.io/able-pro/changelog#version-9.5.0-13-08-2024) Version 9.5.0 - 13-08-2024 --------------------------------------------------------------------------------------------------------------- * Introduce the following new tech stack * Vue + Laravel * Django * Flask * Node * Svelte * Revise the NextJS version for better speed and performance with new features * Updated doc links to have centralized docs for all tech stacks [PreviousAble Pro - Overview](https://phoenixcoded.gitbook.io/able-pro) [NextRoadMap](https://phoenixcoded.gitbook.io/able-pro/roadmap) Last updated 1 month ago --- # RoadMap | Able Pro * React with Tailwind * More apps * More Dashboard * Secondary design system [PreviousChangelog](https://phoenixcoded.gitbook.io/able-pro/changelog) [NextVersioning](https://phoenixcoded.gitbook.io/able-pro/versioning) Last updated 2 months ago --- # Dashboard as First Page | NextJS | Able Pro This section explains how to set the Dashboard page as the default starting page, skipping the landing page, for cases where it is not needed. * Update the route to _**full-version/src/app/page**_ NEXT (TS) NEXT (JS) src/app/page.tsx Copy // project-imports import DashboardLayout from 'layout/DashboardLayout'; import DashboardDefault from 'views/dashboard/DashboardDefault'; ​ export default function Landing() { return ( ); } src/app/page.jsx Copy // project-imports import DashboardLayout from 'layout/DashboardLayout'; import DashboardDefault from 'views/dashboard/DashboardDefault'; ​ export default function Landing() { return ( ); } Disabling authentication within the system would render certain applications non-functional, particularly those reliant on backend APIs. These applications require a valid token to access and load data seamlessly. [PreviousLogin as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/login-as-first-page) [NextRemove menu render from Backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-menu-render-from-backend) Last updated 1 month ago --- # Versioning | Able Pro To address this issue, the table below outlines the product, along with the respective version of each technology it incorporates. All the technology versions can be identified using the package.json or composer.json of each project. Product Bootstrap Tailwind React Next JS Angular .Net CI Vue Laravel+Vue Laravel + Bs Node Django Flask Svelte 9.8.0 9.6.2 \- 10.1.0 4.1.0 3.2.1 \- \- 1.5.0 \- \- \- \- \- \- **9.7.1** 9.6.1 1.2.0 10.0.0 4.0.0 3.2.0 1.5.2 1.5.2 1.5.0 \- 1.2.0 1.1.0 1.1.0 1.1.0 1.1.0 **9.7.0** 9.6.0 \- 9.3.0 3.0.0 3.1.0 1.5.1 1.5.1 1.4.1 1.2.1 \- \- \- \- **9.6.0** 9.5.0 1.1.0 \- \- 3.0.0 1.5.0 1.5.0 1.4.0 1.2.0 1.1.0 \- \- \- \- **9.5.1** 9.4.3 1.0.0 9.2.2 2.0.1 2.3.1 1.4.3 1.4.3 1.3.1 1.0.1 1.0.0 \- \- \- \- **9.5.0** 9.4.2 \- 9.2.1 2.0.0 2.3.0 1.4.2 1.4.2 1.3.0 1.0.0 1.0.0 1.0.0 1.0.0 1.0.0 **9.4.1** 9.4.1 \- \- \- \- 1.4.1 1.4.1 1.2.0 \- \- \- \- \- **9.4.0** 9.4.0 \- 9.2.0 \- 2.2.0 1.4.0 1.4.0 1.1.0 \- \- \- \- \- **9.3.0** 9.3.0 \- \- \- \- 1.3.0 1.3.0 1.1.0 \- \- \- \- \- **9.2.0** 9.2.0 \- \- 1.0.0 2.1.0 1.2.0 1.2.0 1.0.0 \- \- \- \- \- **9.1.2** 9.1.2 \- 9.1.2 \- 2.0.0 1.1.2 1.1.2 \- \- \- \- \- \- [PreviousRoadMap](https://phoenixcoded.gitbook.io/able-pro/roadmap) Last updated 1 month ago --- # Remove menu render from Backend | NextJS | Able Pro NEXT (TS) NEXT (JS) In the Able Pro React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** load from our mock API ([GitHub repository](https://github.com/phoenixcoded20/mock-data-api-nextjs) ). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code. 1. **Delete the menu-items file** `dashboard.tsx` \[`src/menu-items/dashboard.jsx`\] 2. **Open file** `src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx` **and edit the line of code.** **From:** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx Copy import { Fragment, useLayoutEffect, useState } from 'react'; ... import menuItem from 'menu-items'; import { useGetMenu, useGetMenuMaster } from 'api/menu'; **To:** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx Copy import { Fragment, useState } from 'react'; ... import menuItems from 'menu-items'; import { useGetMenuMaster } from 'api/menu'; 1. **Open file** `src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx` **and remove the line of code.** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx Copy import { MenuFromAPI } from 'menu-items/dashboard'; function isFound(arr: any, str: string) { return arr.items.some((element: any) => { if (element.id === str) { return true; } return false; }); } export default function Navigation() { ... const { menuLoading } = useGetMenu(); ... const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] }); let dashboardMenu = MenuFromAPI(); useLayoutEffect(() => { if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) { menuItem.items.splice(0, 0, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) { menuItem.items.splice(0, 1, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else { setMenuItems({ items: [...menuItem.items] }); } // eslint-disable-next-line }, [menuLoading]); } 1. **Open file** `src\api\menu.ts` **and edit the line of code.** **From:** src/api/menu.ts Copy import { MenuProps, NavItemType } from 'types/menu'; **To:** src/api/menu.ts Copy import { MenuProps } from 'types/menu'; 1. **Open the file** `src\api\menu.ts` **and remove the code below.** src/api/menu.ts Copy import { fetcher } from 'utils/axios'; export const endpoints = { ... dashboard: '/dashboard' // server URL }; export function useGetMenu() { const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo( () => ({ menu: data?.dashboard as NavItemType, menuLoading: isLoading, menuError: error, menuValidating: isValidating, menuEmpty: !isLoading && !data?.length }), [data, error, isLoading, isValidating] ); return memoizedValue; } In the Able Pro React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** load from our mock API ([GitHub repository](https://github.com/phoenixcoded20/mock-data-api-nextjs) ). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code. 1. **Delete menu-items file** `dashboard.jsx` \[`src/menu-items/dashboard.jsx`\] 2. **Open file** `src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx` **and edit the below line of code.** **From:** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx Copy import { Fragment, useLayoutEffect, useState } from 'react'; ... import menuItem from 'menu-items'; import { useGetMenu, useGetMenuMaster } from 'api/menu'; **To:** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx Copy import { Fragment, useState } from 'react'; ... import menuItems from 'menu-items'; import { useGetMenuMaster } from 'api/menu'; 1. **Open file** `src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx` **and remove the below line of code.** src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx Copy import { MenuFromAPI } from 'menu-items/dashboard'; function isFound(arr, str) { return arr.items.some((element) => { if (element.id === str) { return true; } return false; }); } export default function Navigation() { ... const { menuLoading } = useGetMenu(); ... const [menuItems, setMenuItems] = useState({ items: [] }); const dashboardMenu = MenuFromAPI(); useLayoutEffect(() => { if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) { menuItem.items.splice(0, 0, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) { menuItem.items.splice(0, 1, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else { setMenuItems({ items: [...menuItem.items] }); } // eslint-disable-next-line }, [menuLoading]); } 1. **Open the file** `src\api\menu.js` **and remove the code below.** src/api/menu.js Copy import { fetcher } from 'utils/axios'; export const endpoints = { ... dashboard: '/dashboard' // server URL }; export function useGetMenu() { const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo( () => ({ menu: data?.dashboard, menuLoading: isLoading, menuError: error, menuValidating: isValidating, menuEmpty: !isLoading && !data?.length }), [data, error, isLoading, isValidating] ); return memoizedValue; } [PreviousDashboard as First Page](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/dashboard-as-first-page) [NextRender Menu from the backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend) Last updated 1 month ago --- # Render Menu from the backend | NextJS | Able Pro Able Pro is already rendering the menu from the backend. The dashboard menus (Default, Analytics) are rendered via the back end. You can check the Fack backend API here that we used to render the menu: [![Logo](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2Fgithub.com%2Ffluidicon.png&width=20&dpr=4&quality=100&sign=9e53c2a0&sv=2)GitHub - phoenixcoded20/mock-data-api-nextjsGitHub](https://github.com/phoenixcoded20/mock-data-api-nextjs) NEXT (TS) NEXT (JS) To add a menu from the backend, you can follow the steps below: 1. Open the file `**menu.ts**` _(src/api/menu.ts)_, and edit the API URL in the **useGetMenu** function src/api/menu.ts Copy const endpoints = { key: 'api/menu', dashboard: '/dashboard' // server URL }; export function useGetMenu() { const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo(() => { let updatedMenu = data?.dashboard; if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) { updatedMenu = { ...updatedMenu, children: updatedMenu.children.map((group: NavItemType) => { if (Array.isArray(group.children)) { return { ...group, children: [...group.children, staticMenuItem] }; } return group; }) }; } return { menu: updatedMenu as NavItemType, menuLoading: isLoading, menuError: error, menuValidating: isValidating, menuEmpty: !isLoading && !data?.length }; }, [data, error, isLoading, isValidating]); return memoizedValue; } 1. Add a file `**menu.tsx**` in the src/menu-items, and copy the code from `**dashboard.tsx**` (src/menu-items/). Set icons and local files according to the API response. 2. Open the file `**index.tsx**` _(_src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx_)_, and add the code below the line. src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx Copy import { useGetMenu } from 'api/menu'; import menuItem from 'menu-items'; import { MenuFromAPI } from 'menu-items/dashboard'; function isFound(arr: any, str: string) { return arr.items.some((element: any) => { if (element.id === str) { return true; } return false; }); } // ==============================|| DRAWER CONTENT - NAVIGATION ||============================== // export default function Navigation() { const { menuLoading } = useGetMenu(); const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] }); const dashboardMenu = MenuFromAPI(); useLayoutEffect(() => { if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) { menuItem.items.splice(0, 0, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) { menuItem.items.splice(0, 1, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else { setMenuItems({ items: [...menuItem.items] }); } // eslint-disable-next-line }, [menuLoading]); ... } To add a menu from the backend, you can follow the steps below: 1. Open the file `**menu.js**` _(src/api/menu.js)_, and edit the API URL in the **useGetMenu** function src/api/menu.js Copy const endpoints = { key: 'api/menu', dashboard: '/dashboard' // server URL }; export function useGetMenu() { const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, { revalidateIfStale: false, revalidateOnFocus: false, revalidateOnReconnect: false }); const memoizedValue = useMemo(() => { let updatedMenu = data?.dashboard; if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) { updatedMenu = { ...updatedMenu, children: updatedMenu.children.map((group) => { if (Array.isArray(group.children)) { return { ...group, children: [...group.children, staticMenuItem] }; } return group; }) }; } return { menu: updatedMenu, menuLoading: isLoading, menuError: error, menuValidating: isValidating, menuEmpty: !isLoading && !data?.length }; }, [data, error, isLoading, isValidating]); return memoizedValue; } 1. Add a file `**menu.jsx**` in the src/menu-items, and copy the code from `**dashboard.jsx**` (src/menu-items/). Set icons and local files according to the API response. 2. Open the file `**index.jsx**` _(_src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx_)_, and add the code below the line. src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx Copy import { useGetMenu } from 'api/menu'; import menuItem from 'menu-items'; import { MenuFromAPI } from 'menu-items/dashboard'; function isFound(arr, str) { return arr.items.some((element) => { if (element.id === str) { return true; } return false; }); } // ==============================|| DRAWER CONTENT - NAVIGATION ||============================== // export default function Navigation() { const { menuLoading } = useGetMenu(); const [menuItems, setMenuItems] = useState({ items: [] }); const dashboardMenu = MenuFromAPI(); useLayoutEffect(() => { if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) { menuItem.items.splice(0, 0, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) { menuItem.items.splice(0, 1, dashboardMenu); setMenuItems({ items: [...menuItem.items] }); } else { setMenuItems({ items: [...menuItem.items] }); } // eslint-disable-next-line }, [menuLoading]); ... } [PreviousRemove menu render from Backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-menu-render-from-backend) [NextRemove Auth](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-auth) Last updated 1 month ago --- # Remove Auth | NextJS | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-auth#disable-authentication-temporary) **Disable Authentication Temporary** ------------------------------------------------------------------------------------------------------------------------------------------------- Disabling authentication temporarily is generally not recommended due to security risks. However, if you have a specific scenario where you need to disable authentication for a short period, here are some steps you can follow: 1. Comment out the `AuthGuard` wrapper for the routes within the `DashboardLayout` element: NEXT(TS) NEXT(JS) src/app/(dashboard)/layout.tsx Copy // project-imports import DashboardLayout from 'layout/DashboardLayout'; // import AuthGuard from 'utils/route-guard/AuthGuard'; // ==============================|| DASHBOARD LAYOUT ||============================== // export default function Layout({ children }: { children: React.ReactNode }) { return ( // {children} // ); } src/app/(dashboard)/layout.jsx Copy // project-imports import DashboardLayout from 'layout/DashboardLayout'; // import AuthGuard from 'utils/route-guard/AuthGuard'; // ==============================|| DASHBOARD LAYOUT ||============================== // export default function Layout({ children }) { return ( // {children} // ); } In the code snippet above, the `` a component is commented out, allowing the routes within the `DashboardLayout`component to be rendered without authentication protection. To enable the AuthGuard wrapper again, remove the comment markers (`//`) surrounding the `` component. [](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/remove-auth#remove-authentication-permanent) Remove Authentication Permanent ------------------------------------------------------------------------------------------------------------------------------------------- If you want to remove authentication from a system or application permanently, here are the steps to follow: 1. Remove below authentication keys below from `**next.config.js**` file. next.config.js Copy ... . NEXT_APP_JWT_SECRET: NEXT_APP_JWT_TIMEOUT: NEXTAUTH_SECRET_KEY: 1. Removed below list of files and directories. Copy ├── src │ ├── app │ │ ├── auth (remove directory with all sub files) │ │ ├── api (remove directory with all sub files) │ ├── views │ │ ├── authentication (remove directory with all sub files) │ │ ├── auth (remove directory with all sub files) │ ├── sections │ │ ├── auth (remove directory with all sub files) │ ├── utils │ │ ├── route-guard (remove directory with all sub files) │ │ ├── authOptions.ts 1. Commented out the full file `**./src/utils/axios.ts**` 2. Remove or change `**/login**` routes. * **If you want to remove routes**, remove the router component `Link` with `href=''` props. * **If you want to change url**, set the home page URL like, `to={APP_DEFAULT_PATH}` , And import `APP_DEFAULT_PATH` from `config` file. [PreviousRender Menu from the backend](https://phoenixcoded.gitbook.io/able-pro/nextjs/how-to/render-menu-from-the-backend) [NextFigma](https://phoenixcoded.gitbook.io/able-pro/nextjs/figma) Last updated 1 month ago --- # Seed | NextJS | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/seed#get-started-with-seed) Get started with Seed --------------------------------------------------------------------------------------------------------------------- Seed is the real seed for any new react project. If you think that you know react very well, a seed is a perfect version for you. **Seed is a folder structure created using react-script with minimal files from the full version to get started**. All the unused dependencies are removed from `package.json` unlike the skeleton version, which does not have the same packages as the full version. All the unused files and references were removed, like routes, sections, context, API, data, etc. You can check the difference between skeleton and seed on to next page. The seed version is created for those who just want a theme and then want to implement their own things. The Seed version is only available after you purchase a theme. So when you run the project using yarn/npm, you will see a minimal site like below: ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2Fcontent.gitbook.com%2Fcontent%2FwavVPBvcjnLZ17Y9HyuV%2Fblobs%2FkXhMDC3AuxwBGeBnFk5Q%2Fimage.png&width=768&dpr=4&quality=100&sign=49954725&sv=2) It provides you with a very simple and intuitive structure to get started with a new project. You can add new components from the full version. Now let's see how we can do that. ### [](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/seed#add-components-to-the-skeleton-new-project) Add components to the skeleton/new project Now, let's add some cool components from the full version to the project that we just created. It will help you craft your pages as per your needs. So let's begin: Consider a scenario where you want to add `Total Users` a widget (Left card on the analytics dashboard) from the full version to the sample page. For that, we need to do the following things in order. 1. Copy the following code and replace it with the sample-page 2. You will see there will be an import error for EcommerceDataCard, so you need to go to full-version, find out component, and copy that component from the full version to the skeleton. That's it. Copy // material-ui import { useTheme } from '@mui/material/styles'; import { Grid, Typography } from '@mui/material'; // project-import import EcommerceDataCard from 'components/cards/statistics/EcommerceDataCard'; import EcommerceDataChart from './EcommerceDataChart'; // assets import { ArrowUp, Wallet3 } from 'iconsax-react'; // ==============================|| SAMPLE PAGE ||============================== // const SamplePage = () => { const theme = useTheme(); return ( } percentage={ 30.6% } > ); }; export default SamplePage; It will output as follows: ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2Fcontent.gitbook.com%2Fcontent%2FwavVPBvcjnLZ17Y9HyuV%2Fblobs%2FbSjrGrlvOVPZz1Zgpn2m%2Fimage.png&width=768&dpr=4&quality=100&sign=5020d6e7&sv=2) Cool and straightforward, right? You can do the same for other components and design your pages as per your needs. We have made common and reusable controls as well, which you can see inside `/src/components`. Feel free to refer to those as well and start developing your page. I hope we cover some basics to get started with the Able pro template and how to integrate it for your new project. [PreviousIntegration](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration) [NextComparison](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/comparison) Last updated 1 month ago --- # Comparison | NextJS | Able Pro To understand all three packages, please check the following comparison. The Bold part shows the difference. Feature/Package Seed Packages Removed unused Views/Pages Removed unused Routes Removed unused References Removed unused Components Same as full-version Contexts Removed unused Customizer Removed Data (Fake) Removed Layout Removed unused Menu items Removed unused Sections Removed unused Authentications Removed unused Store Removed unused Themes Same as full-version Types (For TS) Removed unused APIs Removed unused [PreviousSeed](https://phoenixcoded.gitbook.io/able-pro/nextjs/integration/seed) [NextDependencies](https://phoenixcoded.gitbook.io/able-pro/nextjs/dependencies) Last updated 1 month ago --- # Welcome | Bootstrap | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F1566901674-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FpiokDVPFDF7BXUwpQGOc%252Fuploads%252Fk5W5LVrEL3X3CCUIC5EB%252FBootstrap%2520%289.6.0%29.png%3Falt%3Dmedia%26token%3D382dcf68-7bf8-4f86-9561-7edafc0061a8&width=768&dpr=4&quality=100&sign=129074c0&sv=2) v9.6.0 - All new redesigned Able Pro Dashboard Template Able pro is an HTML version of the well-known Bootstrap template. Able pro Bootstrap brings you basic HTML components to work with so you can modify them the way you want. It has a complete list of feature and apps which helps you to reduce your development time. **Video Tutorial Series** ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F1566901674-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FpiokDVPFDF7BXUwpQGOc%252Fuploads%252F00Fp4X5mfeLLYHWwFcLC%252Fadv-video-tutorial.png%3Falt%3Dmedia%26token%3Da16ad537-3e31-45bb-aac1-394355d2ceac&width=768&dpr=4&quality=100&sign=695391c1&sv=2) [Click to Watch](https://www.youtube.com/playlist?list=PLiJyhHLaz7pSO99F8BXoXh5Af76raJGK4) [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start) Last updated 7 months ago --- # Welcome | Tailwind - HTML | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F2881817752-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FwQIdwHsk7Xj7Ouw93xa2%252Fuploads%252Fed0xRN2q1OjPMYYNNKWI%252FTailwind%2520Admin%2520Dashboard%2520Template%2520-%2520v1.2.0.png%3Falt%3Dmedia%26token%3Dc2c15a48-1873-4360-ad02-d5e44f0ae0b9&width=768&dpr=4&quality=100&sign=1f6ba0da&sv=2) v1.2.0 Able Pro is a Tailwind version of the well-known Tailwind template. Able Pro-Tailwind brings you basic HTML components to work with, so you can modify them as you want. It features a comprehensive list of tools and apps that help you reduce your development time. **Video Tutorial Series** ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2Fcontent.gitbook.com%2Fcontent%2FwQIdwHsk7Xj7Ouw93xa2%2Fblobs%2Fpz6GOkyrHQ3bB9pKAw4K%2Fadv-video-tutorial.png&width=768&dpr=4&quality=100&sign=606e09c2&sv=2) [Click to Watch](https://www.youtube.com/playlist?list=PLiJyhHLaz7pSO99F8BXoXh5Af76raJGK4) [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start) Last updated 4 months ago --- # Introduction | CodeIgnitor | Able Pro Able pro is an admin dashboard template built with Bootstrap v5 and CodeIgniter 5 for any level of project needs. It has over 200+ prebuild pages. Able pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/quick-start) Last updated 1 year ago --- # Introduction | .Net | Able Pro Able Pro is an admin dashboard template built with Bootstrap v5 and ASP.NET Core 7 for any level of project needs. It has over 200+ prebuild pages. Able Pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start) Last updated 1 year ago --- # Introduction | Flask | Able Pro Able Pro is a comprehensive admin dashboard template crafted with Flask and Bootstrap v5, designed to cater to projects of any scale. It features over 200+ pre-built pages. Able Pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextGetting Started](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started) Last updated 1 year ago --- # Introduction | Django | Able Pro Able Pro is a comprehensive admin dashboard template crafted with Django and Bootstrap v5, designed to cater to projects of any scale. It features over 200+ pre-built pages. Able Pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextGetting Started](https://phoenixcoded.gitbook.io/able-pro/django/getting-started) Last updated 1 year ago --- # Introduction | Angular | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F1840515620-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FmCoowX3fCgawSD1YgKZG%252Fuploads%252FmHeguLSP50QTjMcJ7n77%252Fimage.png%3Falt%3Dmedia%26token%3D302c1b1b-50ef-4cc1-bafb-8d5b0f1fb20f&width=768&dpr=4&quality=100&sign=91547899&sv=2) v3.2.0 Able Pro is a highly customizable Angular Dashboard Template made with Angular Material. which includes plenty of ready-to-use Angular Material components, Able pro will help you to build your site faster and save your development time. We’ve followed the best industry standards to make our product easy, fast & highly scalable. ### [](https://phoenixcoded.gitbook.io/able-pro/angular/#features) Features * Vertical Layouts * Horizontal Layout * Compact Layout * Dark / Light versions * 90+ Pages * 2 Dashboards * 50+ Widget * 8+ Useful Applications * 10 Color Variants * SCSS Powered * Live Page Customizer ### [](https://phoenixcoded.gitbook.io/able-pro/angular/#technical-specification) Technical Specification * [Angular CLI](https://cli.angular.io/) (v20.x) * Prettier * Eslint * TypeScript * [NodeJs](https://nodejs.org/en/) (v22.x.x) * Angular Material (v20.x) [NextQuick Installation](https://phoenixcoded.gitbook.io/able-pro/angular/quick-installation) Last updated 4 months ago --- # Introduction | Nodejs | Able Pro Able Pro is a comprehensive admin dashboard template crafted with Nodejs and Bootstrap v5, designed to cater to projects of any scale. It features over 200+ pre-built pages. Able Pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextGetting Started](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started) Last updated 1 year ago --- # Introduction | sveltekit | Able Pro Able Pro is a comprehensive admin dashboard template crafted with sveltekit and Bootstrap v5, designed to cater to projects of any scale. It features over 200+ pre-built pages. Able Pro has multiple Apps like User, Customer, Chat, File manager, Kanban, Mail, Calendar, Contact, and E-commerce which gives extra fuel to your dashboard needs. [NextGetting Started](https://phoenixcoded.gitbook.io/able-pro/sveltekit/getting-started) Last updated 1 year ago --- # Documentation | Vue | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F2439842683-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FVwRshyiG60HEIyPsuxcb%252Fuploads%252F0cCH0Uj4155hX3rBoV4U%252FVuetify%2520Admin%2520Dashboard%2520Template%2520v1.6.0.png%3Falt%3Dmedia%26token%3Da56e5a96-8d1d-4d31-af23-22dbe222d09d&width=768&dpr=4&quality=100&sign=21e3c152&sv=2) v1.6.0 ### [](https://phoenixcoded.gitbook.io/able-pro/vue/#about-able-pro-vuetify) About Able Pro Vuetify Able Pro is a `developer-friendly` & highly customizable Vuejs 3 Admin Template made using [Vuetify](https://vuetifyjs.com/en/) . A great deal of familiar Vuetify components is ready to use in Ablepro. These components will help you to build your site faster and save your development time. We’ve followed the best industry standards to make our product easy, fast & highly scalable to work with. It's made with this high-end technology stack - **Vuetify, Authentication Method - JWT, Vue 3, and pinia.** ### [](https://phoenixcoded.gitbook.io/able-pro/vue/#technology-stack) Technology Stack * Vuetify v3 components library * Authentication Method(s) - JWT * Axios * Pinia ### [](https://phoenixcoded.gitbook.io/able-pro/vue/#credits) Credits * [Vuetify 3](https://next.vuetifyjs.com/en/) * [Authentication Method - JWT](https://jwt.io/) * [Axios](https://axios-http.com/) * [Pinia](https://pinia.vuejs.org/) * [Perfect Scrollbar](https://github.com/lecion/vue-perfect-scrollbar#readme) * [Font Source](https://fontsource.org/) ### [](https://phoenixcoded.gitbook.io/able-pro/vue/#any-suggestion-or-feedback) Any Suggestion? OR Feedback Feedback is always welcome. Feel free to reach out anytime at our [Support Panel.](https://phoenixcoded.authordesk.app/) We would love to hear from you anytime. [NextPre-requisites](https://phoenixcoded.gitbook.io/able-pro/vue/pre-requisites) Last updated 1 month ago --- # Documentation | Vue Laravel | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F3025910797-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FQ3eW0J6vSeXKIjq75PiA%252Fuploads%252FcZXIhprH2MfKIcLHBPeV%252FVue%2520with%2520Laravel%2520Admin%2520Dashboard%2520Template%2520v1.4.1.png%3Falt%3Dmedia%26token%3D40eb6cf8-516d-49cc-9389-9217f84927a9&width=768&dpr=4&quality=100&sign=d16c60da&sv=2) v1.2.1 ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/#about-able-pro-vue-laravel) About Able Pro Vue Laravel Able Pro is a `developer-friendly` & highly customizable **Vuejs 3** with **Laravel 10** Admin Template made using [Vuetify](https://vuetifyjs.com/en/) . A great deal of familiar Vuetify components is ready to use in Ablepro. These components will help you to build your site faster and save your development time. We’ve followed the best industry standards to make our product easy, fast & highly scalable to work with. It's made with this high-end technology stack - **Vuetify, Laravel,Authentication Method - Sanctum, Vue 3, and pinia.** ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/#technology-stack) Technology Stack * Laravel * Vuetify v3 components library * Authentication Method(s) - Sanctum * Axios * Pinia ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/#credits) Credits * [Vuetify 3](https://next.vuetifyjs.com/en/) * [Laravel 10](https://laravel.com/docs/10.x/installation) * [Authentication Method - Sanctum](https://laravel.com/docs/11.x/sanctum) * [Axios](https://axios-http.com/) * [Pinia](https://pinia.vuejs.org/) * [Perfect Scrollbar](https://github.com/lecion/vue-perfect-scrollbar#readme) * [Font Source](https://fontsource.org/) ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/#any-suggestion-or-feedback) Any Suggestion? OR Feedback Feedback is always welcome. Feel free to reach out anytime at our [Support Panel.](https://phoenixcoded.authordesk.app/) We would love to hear from you anytime. [NextInstallation](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/installation) Last updated 7 months ago --- # Overview | React | Able Pro ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F2131973819-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FEAF6xFq5HycB0flEqRF4%252Fuploads%252FbB3ad8rZ2u1g9mwdropd%252FReact%2520Admin%2520Dashboard%2520Template%2520-%2520v10.0.0.png%3Falt%3Dmedia%26token%3D10da9e91-5640-41f6-98a5-60dc1fe8c2e2&width=768&dpr=4&quality=100&sign=ea9372de&sv=2) v10.1.0 **Able Pro React MUI** is a powerful admin dashboard template built with **Material-UI (MUI)**. It offers pre-built components, layouts, and apps, making development faster and easier. Fully customizable and responsive, it's perfect for dashboards, CRM systems, and analytics platforms. 🚀 **Video Tutorial Series** ![](https://phoenixcoded.gitbook.io/able-pro/~gitbook/image?url=https%3A%2F%2F2131973819-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FEAF6xFq5HycB0flEqRF4%252Fuploads%252Fovf83M8TwfddcySYzUUF%252Fadv-video-tutorial.png%3Falt%3Dmedia%26token%3D4520cc63-183c-4d04-b51b-d748533af56b&width=768&dpr=4&quality=100&sign=29e8697&sv=2) [Click to Watch the Video Tutorial Series of Able Pro Dashboard Template](https://www.youtube.com/playlist?list=PLiJyhHLaz7pSO99F8BXoXh5Af76raJGK4) [](https://phoenixcoded.gitbook.io/able-pro/react/#technology-stack) Technology Stack ------------------------------------------------------------------------------------------ * React 19 * Material UI v7 components library * Authentication Methods - Auth0, Firebase, JWT, AWS * React Hooks API * SWR & React Context API for State Management * React Router v7 * Axios * Vite * Code Splitting * CSS-in-JS * Multi-Language [](https://phoenixcoded.gitbook.io/able-pro/react/#credits) Credits ------------------------------------------------------------------------ * [React 19](https://react.dev/blog/2024/12/05/react-19) * [Material UI v7](https://mui.com/) * [Vite](https://vitejs.dev/guide/) * [SWR](https://swr.vercel.app/) * [React Router](https://github.com/ReactTraining/react-router) * [Firebase](https://firebase.google.com/docs/auth) , [Auth0](https://auth0.com/) , [JWT](https://jwt.io/) , [AWS Cognito](https://aws.amazon.com/cognito/) * [Google Fonts](https://fonts.google.com/) [](https://phoenixcoded.gitbook.io/able-pro/react/#any-suggestions-or-feedback) Any suggestions? OR Feedback ----------------------------------------------------------------------------------------------------------------- Feedback from our beloved community is always welcome. Feel free to reach out anytime at our [Support Panel](https://codedthemes.support-hub.io/) . We would love to hear from you at any time. [NextPre-requisites](https://phoenixcoded.gitbook.io/able-pro/react/pre-requisites) Last updated 1 month ago --- # Quick Start | Bootstrap | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#installation) Installation Navigate to your root folder **(i.e. ablepro-vanilla-js)** Copy c:>cd able-pro-vanilla-js Install packages by npm or yarn according to your preferences. Here we are using the npm package manager. Copy > npm i After package installation, you can start your app by using `**Gulp**` command. This will regenerate the dist folder. You can keep this command running while making changes in the `src` folder. It will auto-apply to the `dist` folder and your browser. Copy > gulp If you are interested more in learning about gulp, check the below section, else you can skip it. Gulp[](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#gulp) #### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#dont-know-about-gulp) Don't know about Gulp? Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever. * Auto Minify/Uglify CSS, HTML, and JS codes * Auto Compile SaSS file * 3000+ Plugins #### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#gulp-for-able-pro) Gulp for Able pro Use Gulp in Able Pro for building different layouts and theme customization with lots of functional tasks like Image Optimization, SaSS compilation, etc...which useful to make the production-ready `dist/`directory ### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#gulp-commands-task) **Gulp Commands(task)** #### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#default-task) Default task Gulp Command Description gulp which build template in `/dist` directory #### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start#basic-task) Basic task Gulp Command Description gulp sass which compile .scss files from `/src/assets/scss` directory and place it into a `/dist/assets/css` directory gulp imgmin which use to optimize images from `/src/assets/images` directory and place it into a `/dist/assets/images` directory gulp build which use to copy files from `/src/assets` directory and place it into a `/dist/assets` directory gulp build-html which uses compiling your HTML file from `/src/html` directory and place it into a `/dist` directory gulp build-js which use to build `.js` files from `/src/assets/js` directory and place it into a `/dist/assets/js` directory gulp watch It will automatically start your build process if you make any changes in HTML, scss or js files from `/src` directory and put new changes to `/dist` directory gulp watch-minify It will automatically start your build process if you make any changes in HTML, scss or js files from `/src` directory and put new changes to `/dist` directory with **minify assets** [PreviousWelcome](https://phoenixcoded.gitbook.io/able-pro/bootstrap) [NextStructure](https://phoenixcoded.gitbook.io/able-pro/bootstrap/structure) Last updated 11 months ago --- # Quick Start | Tailwind - HTML | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#installation) Installation Navigate to your root folder **(i.e. ablepro-tailwind****)** Copy c:>cd able-pro-tailwind Install packages by npm or yarn according to your preferences. Here we are using the npm package manager. Copy > npm i After package installation, you can start your app by using `**Gulp**` command. This will regenerate the dist folder. You can keep this command running while making changes in the `src` folder. It will auto-apply to the `dist` folder and your browser. Copy > gulp If you are interested more in learning about gulp, check the below section, else you can skip it. Gulp[](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#gulp) #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#dont-know-about-gulp) Don't know about Gulp? Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever. * Auto Minify/Uglify CSS, HTML, and JS codes * Auto Compile SaSS file * 3000+ Plugins #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#gulp-for-able-pro) Gulp for Able pro Use Gulp in Able Pro for building different layouts and theme customization with lots of functional tasks like Image Optimization, SaSS compilation, etc...which useful to make the production-ready `dist/`directory #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#dont-know-about-gulp-1) Don't know about Gulp? Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever. * Auto Minify/Uglify CSS, HTML, and JS codes * Auto Compile SaSS file * 3000+ Plugins #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#gulp-for-able-pro-1) Gulp for Able pro Use Gulp in Able pro is for building different layouts and theme customization with lots of functional tasks like Image Optimization, SaSS compilation, etc...which really useful to make the production-ready `dist/`directory **How to set up Gulp for Able pro?** 1. Make sure that you have already installed **Nodejs and Gulp** on your server/computer 2. Open the "Nodejs Command prompt" and redirect to your project root directory. 3. Enter the command `yarn` in the command prompt. 4. After that, you must run the below tasks to build a production-ready dist/ directory. ### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#gulp-commands-task) **Gulp Commands(task)** #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#default-task) Default task Gulp Command Description gulp which build template in `/dist` directory #### [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start#basic-task) Basic task Gulp Command Description gulp sass which compile .scss files from `/src/assets/scss` directory and place it into a `/dist/assets/css` directory gulp imgmin which use to optimize images from `/src/assets/images` directory and place it into a `/dist/assets/images` directory gulp build-node-modules which use to copy files from `/src/assets` directory and place it into a `/dist/assets` directory gulp build-html which uses compiling your HTML file from `/src/html` directory and place it into a `/dist` directory gulp build-js which use to build `.js` files from `/src/assets/js` directory and place it into a `/dist/assets/js` directory gulp watch It will automatically start your build process if you make any changes in HTML, scss or js files from `/src` directory and put new changes to `/dist` directory gulp watch-minify It will automatically start your build process if you make any changes in HTML, scss or js files from `/src` directory and put new changes to `/dist` directory with **minify assets** [PreviousWelcome](https://phoenixcoded.gitbook.io/able-pro/tailwind-html) [NextStructure](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/structure) Last updated 11 months ago --- # Structure | Bootstrap | Able Pro Following the default directory structure along with page structure. That helps you understand the entire Able pro template structure. * [Directory Structure](https://phoenixcoded.gitbook.io/able-pro/bootstrap/structure/directory-structure) * [Page Structure](https://phoenixcoded.gitbook.io/able-pro/bootstrap/structure/page-structure) [PreviousQuick Start](https://phoenixcoded.gitbook.io/able-pro/bootstrap/quick-start) [NextDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/bootstrap/structure/directory-structure) Last updated 1 year ago --- # Quick Installation | Angular | Able Pro You **don’t** need to install or configure tools like WebPack or CLI. They are configured and hidden so that you can focus on the code. 1. First of all, it's required to Install [Node](https://nodejs.org/en/) and npm. 2. Update the latest [angular-cli](https://cli.angular.io/) global package to Angular 20+ with CLI 20.x.x 3. Unzip the **able-pro-angular**, and you will find the /project folder. 4. Open the terminal, **install the required node packages** using the following command Copy npm install 5. To run the project **locally,** run the following command will run the app in development mode. Open [http://localhost:4200](http://localhost:4200/) to view it in the browser. Copy npm run start 6. The page will automatically reload if you make changes to the code. 7. Now you can use this Angular project for your application development and make the necessary changes. 8. To build the app for production, the following command will create the `dist/` folder inside this project directory. Copy npm run build The project was built assuming it is hosted at the server root folder of the domain/platform i.e`**http://example.com**` [](https://phoenixcoded.gitbook.io/able-pro/angular/quick-installation#or) or ---------------------------------------------------------------------------------- to deploy build for sub-folder i.e`**http://example.com/folder-name**` You also need to set **** [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/angular) [NextDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/angular/directory-structure) Last updated 2 months ago --- # Pre-requisites | Vue | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/vue/pre-requisites#pre-requisites) **Pre-requisites** Able-pro vue is based on `nodejs.` Please check the following **prerequisites** before jumping on it. In your command terminal and check using the `**node -v**` command Copy node -v v22.16.0 **Package Manager** - npm or yarn Copy yarn -v 1.22.22 ### [](https://phoenixcoded.gitbook.io/able-pro/vue/pre-requisites#troubleshooting) **Troubleshooting** If you face the following error in your terminal, it means **Yarn** is not installed in your system. Copy yarn -v 'yarn' is not recognised as an internal or external command, operable program or batch file. Please install it using this [link](https://yarnpkg.com/getting-started/install) , as it does not come with **Node** automatically. [PreviousDocumentation](https://phoenixcoded.gitbook.io/able-pro/vue) [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start) Last updated 1 month ago --- # Directory Structure | Angular | Able Pro Copy ├── src/ │ ├── app/ │ │ ├── @theme/ -> Theming for the project will be managed here │ │ │ ├── components/ -> Custom-made component of theme │ │ │ │ ├── card │ │ │ │ ├── breadcrumb -> Theme breadcrumb │ │ │ │ ├── helpers │ │ │ │ ├── modal-dialog │ │ │ │ ├── navigation/ -> Navigation components │ │ │ ├── layouts/ -> Layout for dashboard │ │ │ │ ├── menu/ │ │ │ │ │ ├── vertical-menu/ │ │ │ │ │ ├── ... │ │ │ │ ├── toolbar/ │ │ │ ├── service/ -> Services related to theme │ │ │ ├── styles/ │ │ │ │ ├── layout -> Layout scss │ │ │ │ ├── pages -> Pages scss │ │ │ │ ├── theme-mode -> Theming mode scss │ │ │ │ ├── grid.scss -> Gird layout scss │ │ │ │ ├── theme-overrides.scss -> Angular material overrides │ │ │ │ ├── theme-dark-palette-colors.scss -> Theming dark color scss │ │ │ │ ├── theme-palette-colors.scss -> Theming color scss │ │ │ │ ├── theme.scss -> Theming scss │ │ │ ├── types/ │ │ ├── demo/ │ │ │ ├── data/ │ │ │ │ ├── component.ts │ │ │ │ ├── menu.ts │ │ │ ├── layout/ │ │ │ │ ├── admin │ │ │ │ ├── component │ │ │ │ ├── empty │ │ │ │ ├── front │ │ │ ├── pages/ -> View files for all pages │ │ │ │ ├── admin-panel/ -> Admin Panel │ │ │ │ │ ├── helpdesk/ │ │ │ │ │ ├── invoice/ │ │ │ │ │ ├── membership/ │ │ │ │ │ ├── online-courses/ │ │ │ │ ├── application/ -> Application pages │ │ │ │ │ ├── calender │ │ │ │ │ ├── kanban │ │ │ │ │ ├── ... │ │ │ │ ├── auth/ -> Auth pages │ │ │ │ │ ├── authentication-1/ │ │ │ │ │ ├── ... │ │ │ │ ├── dashboard/ -> Dashboard page │ │ │ │ ├── components/ -> Angular material component page │ │ │ │ │ ├── data-display/ │ │ │ │ │ ├── ... │ │ │ │ ├── ... -> Other theme page │ │ │ ├── shared/ │ │ ├── fake-data/ -> Dummy data │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.ts │ │ ├── app.config.ts -> Different theme config │ │ ├── app-routing.module.ts -> Different routes based on layouts │ ├── assets/ │ ├── environments/ │ ├── SCSS/ │ │ ├── fonts/ │ │ ├── more... │ ├── style.scss/ -> Theme style │ ├── _index.html │ ├── _main.ts │ ├── ... ├── angular.json -> Angular json file ├── package.json -> Package json file ├── ... [PreviousQuick Installation](https://phoenixcoded.gitbook.io/able-pro/angular/quick-installation) [NextPage Structure](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure) Last updated 10 months ago --- # Getting Started | Flask | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#prerequisites) Prerequisites --------------------------------------------------------------------------------------------------- #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#code-editor-of-your-choice) Code Editor of your choice Before you begin, make sure you have the following installed on your machine: * [Node.js](https://nodejs.org/en) ( Node v20.\*) * [Python](https://www.python.org/) (3.6 or higher) * Flask ### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#build-assets) Build Assets Before running the application we need to build theme assets: 1. Open your project to vs code 2. Start a command prompt window or terminal and change directory to Admin/ 3. Install packages using one of following commands Copy npm install npm run build **This command will fetch all dependencies listed in** `**/package.json**` **and place them into**`**/node_modules**` **folde**r. ### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#install-python) Install Python #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#flask-is-a-python-web-framework.-see-what-python-version-can-i-use-with-flask-for-details) Flask is a Python web framework. See [What Python version can I use with Flask?](https://flask.palletsprojects.com/en/3.0.x/installation/) for details. 1. Get the latest version of Python at [https://www.python.org/downloads/](https://www.python.org/downloads/) or with your operating system’s package manager. 2. Download the executable installer and run it. 3. After installation, open the command prompt and check that the Python version matches the version you installed by executing: Copy python --version #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#check-pip-version) Check Pip Version Copy py -m pip --version #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#upgrade-pip) Upgrade Pip Copy py -m pip install --upgrade pip #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#virtualenv) Virtualenv Make sure to have the `virtualenv` installed globally & running on your computer. You can skip this step if you have already installed it on your computer. Virtualenv installation command for Linux & mac os Copy python3 -m pip install --user virtualenv Virtualenv installation command for Windows Copy py -m pip install --user virtualenv Create a virtual environment for our project. It's always recommended to create separate virtual environments for each project Copy python -m venv environment-name for mac os python3 -m venv environment-name Activate Virtual Environment on Windows Copy environment-name/Scripts/activate Activate Virtual Environment on mac OS Copy source ./environment-name/bin/activate **Note** : Depending on your installation, you may need to use either pip3 or pip and for python you may need to use either python3 or python. #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#flask-and-other-dependencies) Flask And Other Dependencies Copy pip install -r requirements.txt #### [](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started#run-below-command-for-run-your-project) Run below command for run your project Copy flask run [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/flask) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/flask/folder-structure) Last updated 1 year ago --- # Quick Start | .Net | Able Pro Able Pro supports ASP.net Core 7. The following is a guide to quickly start using the template. [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#prerequisites) Prerequisites ---------------------------------------------------------------------------------------------- #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#visual-studio) Visual Studio Make sure to have [Visual Studio](https://visualstudio.microsoft.com/vs/) downloaded on your machine. Currently, Able Pro supports ASP.net Core 7 or newer. ### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#build-theme) Build Theme Navigate to your root folder **(i.e. ablepro-dotnet)** Copy c:>cd able-dotnet Install packages by npm or yarn according to your preferences. Here we are using the npm package manager. Copy > npm i After package installation, you can start your app by using `**Gulp**` command. This will regenerate the wwwroot/assets folder. You can keep this command running while making changes in the `src` folder. It will auto-apply to the `wwwroot` folder and your browser. Copy > gulp Go to the root directory of the project and open `**AbleproDotNet.sln**` solution file in Visual studio. If you are interested more in learning about gulp, check the below section, else you can skip it. Gulp[](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#gulp) #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#dont-know-about-gulp) Don't know about Gulp? Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever. * Auto Minify/Uglify CSS, HTML, and JS codes * Auto Compile SaSS file * 3000+ Plugins #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#gulp-for-able-pro) Gulp for Able pro Use Gulp in Able Pro for building assets for theme with lots of functional tasks like Image Optimization, SaSS compilation, etc...which useful to make the production-ready `wwwroot/assets` directory ### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#gulp-commands-task) **Gulp Commands(task)** #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#default-task) Default task Gulp Command Description `gulp` which build assets in `**wwwroot/**` directory #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#basic-task) Basic task Gulp Command Description `gulp sass` which compile .scss files from `/src/assets/scss` directory and place it into a `/dist/assets/css` directory `gulp imgmin` which use to optimize images from `/src/assets/images` directory and place it into a `/dist/assets/images` directory `gulp build` which use to copy files from `/src/assets` directory and place it into a `/dist/assets` directory `gulp build-html` which uses compiling your HTML file from `/src/html` directory and place it into a `/dist` directory `gulp build-js` which use to build `.js` files from `/src/assets/js` directory and place it into a `/dist/assets/js` directory #### [](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start#now-compile-and-run-the-project-using-visual-studio) Now Compile and run the project using visual studio [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/.net) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/.net/folder-structure) Last updated 11 months ago --- # Structure | Tailwind - HTML | Able Pro Following the default directory structure along with page structure. That helps you understand the entire Able pro template structure. * [Directory Structure](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/structure/directory-structure) * [Page Structure](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/structure/page-structure) [PreviousQuick Start](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/quick-start) [NextDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/structure/directory-structure) --- # Getting Started | Django | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#prerequisites) Prerequisites ---------------------------------------------------------------------------------------------------- #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#code-editor-of-your-choice) Code Editor of your choice Before you begin, make sure you have the following installed on your machine: * [Node.js](https://nodejs.org/en) ( Node v20.\*) * [Python](https://www.python.org/) (3.6 or higher) * [Django](https://www.djangoproject.com/) (4.2 or higher) ### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#build-assets) Build Assets Before running the application we need to build theme assets: 1. Open your project to vs code 2. Start a command prompt window or terminal and change directory to Admin/ 3. Install packages using one of following commands Copy npm install npm run build **This command will fetch all dependencies listed in** `**/package.json**` **and place them into**`**/node_modules**` **folde**r. ### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#install-python) Install Python #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#django-is-a-python-web-framework.-see-what-python-version-can-i-use-with-django-for-details) Django is a Python web framework. See [What Python version can I use with Django?](https://docs.djangoproject.com/en/4.0/faq/install/#faq-python-version-support) for details. 1. Get the latest version of Python at [https://www.python.org/downloads/](https://www.python.org/downloads/) or with your operating system’s package manager. 2. Download the executable installer and run it. 3. After installation, open the command prompt and check that the Python version matches the version you installed by executing: Copy python --version #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#check-pip-version) Check Pip Version Copy py -m pip --version upgrade pip py -m pip install --upgrade pip #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#virtualenv) Virtualenv Make sure to have the `virtualenv` installed globally & running on your computer. You can skip this step if you have already installed it on your computer. Virtualenv installation command for Linux & mac os Copy python3 -m pip install --user virtualenv Virtualenv installation command for Windows Copy py -m pip install --user virtualenv or py -m pip install virtualenv Create a virtual environment for our project. It's always recommended to create separate virtual environments for each project Copy python -m venv environment-name for mac os python3 -m venv environment-name Activate Virtual Environment on Windows Copy environment-name/Scripts/activate Activate Virtual Environment on mac OS Copy source ./environment-name/bin/activate **Note** : Depending on your installation, you may need to use either pip3 or pip and for python you may need to use either python3 or python. #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#django-and-other-dependencies) Django And Other Dependencies Install Django on linux & mac OS Copy pip install -r requirements.txt #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#run-database-migrations) Run Database migrations Copy python manage.py makemigrations python manage.py migrate #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#setting-up-static-files) Setting up Static Files Go to Admin/ablepro/settings.py and add following command:- Copy STATIC_URL = 'static/' STATICFILES_DIRS = [os.path.join(BASE_DIR,'dist')] #### [](https://phoenixcoded.gitbook.io/able-pro/django/getting-started#run-below-command-for-run-your-project) Run below command for run your project Copy python manage.py runserver [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/django) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/django/folder-structure) Last updated 1 year ago --- # Quick Start | CodeIgnitor | Able Pro Able Pro supports CodeIgniter 5. The following is a guide to quickly start using the template. [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/quick-start#prerequisites) Prerequisites ------------------------------------------------------------------------------------------------------ ### [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/quick-start#xampp-wamp) XAMPP/ WAMP Make sure to have [XAMPP](https://www.apachefriends.org/download.html) installed on your computer. Currently, Able Pro supports PHP version 7.4 or newer. ### [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/quick-start#composer) Composer A composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Make sure to have [Composer](https://getcomposer.org/) installed on your computer. Currently, Composer supports PHP version 7.4 to run. [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/quick-start#installation) Installation ---------------------------------------------------------------------------------------------------- Navigate to your root folder **(i.e. ablepro-code-ignitor)** Copy c:>cd able-pro-code-ignitor Run the following commands step by step. Copy // Install all required packages in the Vendor folder composer install // Runs the project php spark serve [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/code-ignitor) [NextCustomizer](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/customizer) Last updated 11 months ago --- # Quick Start | Vue | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start#id-1.-package-installation) 1\. Package Installation Navigate to your project folder. Copy cd able-pro-vuetify-vuejs Install packages using npm or yarn, as per your preference. Here we are using `**yarn**` the package manager. Copy able-pro-vuetify-vuejs> yarn or able-pro-vuetify-vuejs> npm install **We would recommend yarn over npm**. Why? See this: [https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/](https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/) ### [](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start#id-2.-start) 2\. Start Once the package is installed, you can start your app by using `**npm run**` command Copy c:\able-pro-vuetify-vuejs> npm run dev This will start your local server at `**http://localhost:3000**` Also, the Terminal shows something like this. Copy Compiled successfully! vite v7.1.4 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 544ms. ### [](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start#id-3.-build-and-deploy) 3\. Build & Deploy To build your app for production use `**yarn build**` command. Copy able-pro-vuetify-vuejs> yarn build or able-pro-vuetify-vuejs> npm run build ### [](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start#id-4.-deploy-for-your-live-site) 4\. Deploy for your live site Change the base URL with your domain and build your application. You can control this with the `homepage` field in your `**package.json**` Copy // Package.json "homepage": "http://example.com" **You’ll need to have Node v20.x.x or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects easily. [PreviousPre-requisites](https://phoenixcoded.gitbook.io/able-pro/vue/pre-requisites) [NextDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/vue/directory-structure) Last updated 1 month ago --- # Pre-requisites | React | Able Pro You don’t need to install or configure tools like Webpack or Babel. They are configured and hidden so that you can focus on the code. [](https://phoenixcoded.gitbook.io/able-pro/react/pre-requisites#pre-requisites) **Pre-requisites** -------------------------------------------------------------------------------------------------------- Able Pro is based on `node` and `create-react script`. Please check the following **prerequisites** before jumping on it. **Node** is the primary prerequisite for Able Pro. Open your command terminal and check using the `**node -v**` command Copy c:\> node -v v22.17.1 **Package Manager** - npm Copy c:\> npm -v 11.5.2 **Package Manager - yarn** This project uses **Yarn (via Corepack)** for dependency management. The required Yarn version is specified in the `package.json` file, and Corepack ensures the correct version is used automatically. There's no need to install Yarn globally. **If Corepack is not available:** Corepack is included with Node.js version 16.10+ by default. If it's not installed or enabled: 1. Ensure you’re using Node.js 16.10 or higher. 2. Enable Corepack by running : `corepack enable` 3. If Corepack is unavailable, update Node.js to a supported version. After Corepack is enabled, simply run `yarn` commands, and the correct version will be handled for you automatically. For more information about Yarn and Corepack, refer to the documentation: 1. [https://yarnpkg.com/getting-started/install](https://yarnpkg.com/getting-started/installhttps://yarnpkg.com/corepack) 2. [https://yarnpkg.com/corepack](https://yarnpkg.com/getting-started/installhttps://yarnpkg.com/corepack) [](https://phoenixcoded.gitbook.io/able-pro/react/pre-requisites#troubleshooting) **Troubleshooting** ---------------------------------------------------------------------------------------------------------- If you face the following error in your terminal, **npm** is not installed in your system. Copy c:\> npm -v 'yarn' is not recognized as an internal or external command, operable program or batch file. [PreviousOverview](https://phoenixcoded.gitbook.io/able-pro/react) [NextQuick Start](https://phoenixcoded.gitbook.io/able-pro/react/quick-start) Last updated 2 months ago --- # Folder Structure | .Net | Able Pro Copy Able-Pro-dotnet/ ├── Ablepro/ │ ├── bin/ │ ├── Controllers/ │ ├── Models/ │ ├── obj/ │ ├── Properties/ │ ├── Views/ │ ├── wwwroot/ │ ├── appsettings.Development.json │ ├── appsettings.json │ ├── Ablepro.csproj │ ├── Program.cs ├── src/ │ ├── assets/ ├── AbleproDotNet.sln ├── gulpfile.js ├── package.json [PreviousQuick Start](https://phoenixcoded.gitbook.io/able-pro/.net/quick-start) [NextCustomizer](https://phoenixcoded.gitbook.io/able-pro/.net/customizer) Last updated 1 year ago --- # Installation | Vue Laravel | Able Pro **System Requirements / Prerequisites** * Node **22.11.0** * Composer **2.6.6** * PHP **8.2.12** ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/installation#installation) Installation 1. Navigate to your project folder. Copy cd able-pro-laravel-vue/full-version 2. Install packages using following two commands. * `composer install` * `npm install` 3. Update `.env` as per your DB setting Copy DB_CONNECTION= DB_HOST= DB_PORT= DB_DATABASE= DB_USERNAME= DB_PASSWORD= 4. Run the following command to **generate the key**. Copy php artisan key:generate ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/installation#local-development) Local development You can run your **development server** using the dev command. This is useful for local development. The development server **automatically detects** changes to files and instantly displays them in all open browser windows. Copy npm run dev To serve Laravel, you need to run following command as well in **separate terminal**: Copy php artisan serve This will run your local server at **http://127.0.0.1:8000** Also, the Terminal shows something like this. Copy INFO Server running on [http://127.0.0.1:8000]. Press Ctrl+C to stop the server ### [](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/installation#deployment-for-production) **Deployment for Production** The assets in your application will be versioned, bundled, and prepared for production deployment when you run the build command: Copy npm run build [PreviousDocumentation](https://phoenixcoded.gitbook.io/able-pro/vue-laravel) [NextDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/directory-structure) Last updated 10 months ago --- # Folder Structure | Flask | Able Pro Copy Ablepro Flask └─Admin ├── 📁src | └── 📁assets | ├── 📁css | ├── 📁fonts | ├── 📁images | ├── 📁js | ├── 📁json | └── 📁scss ├── 📁templates | ├── 📄index.html | ├── 📄readme.html | ├── 📁admins | ├── 📁application | ├── 📁chart | ├── 📁dashboard | ├── 📁demo | ├── 📁elements | ├── 📁forms | ├── 📁layouts | ├── 📁other | ├── 📁pages | ├── 📁table | └── 📁widget ├── 📄.prettierignore ├── 📄 app.py ├── 📄db.sqlite3 ├── 📄package-libs-config.json ├── 📄package-lock.json ├── 📄package.json ├── 📄yarn.lock ├── 📄requirements.txt └── 📄vite.config.js └─Starterkit └─ It's easy start with minimal structure of Admin project. └─Doc └─index.html #### [](https://phoenixcoded.gitbook.io/able-pro/flask/folder-structure#light-able-django-folders-structure) Light Able Flask Folders Structure (Root : /Admin) File/Folder Path Description 📁 src/assets src/assets/ All source file are here. db.sqlite3 db.sqlite3 All Database related migrations file. app.py app.py Main file for our flask project. #### [](https://phoenixcoded.gitbook.io/able-pro/flask/folder-structure#light-able-django-templates) Light Able Flask Templates File Path Description 🗄index.html templates/index.html Light Able Preview Page. 📁admins templates/admins All application pages are here. 📁 application templates/application All application pages are here. Like Account Profile, Chat, eCommerce, Social Media etc. 📁 chart templates/chart All chart pages are here. 📁 dashboard templates/chart Dashboard page is here. 📁 demo templates/chart All the Demo pages here. 📁 elements templates/elements All the alerts, buttons, dropdowns, modals etc. elements files are here. 📁 forms templates/forms All the forms those are used in our kit are here. 📁 layouts templates/layouts All the layout pages like headers, sidebars, customizer and components are here. 📁 other templates/other You can all other pages here. 📁 pages templates/pages You can all authentication related pages here. 📁 table templates/table All tables used in kit are here. 📁 widget templates/widget All UI widget pages are here. [PreviousGetting Started](https://phoenixcoded.gitbook.io/able-pro/flask/getting-started) [Next📄Page Structure](https://phoenixcoded.gitbook.io/able-pro/flask/page-structure) Last updated 1 year ago --- # Changelog | Bootstrap | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.6.2-29-08-2025) v9.6.2 (29-08-2025) ----------------------------------------------------------------------------------------------------------- * Update Packages and Dependencies * UI design improvements [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.6.1-10-07-2025) v9.6.1 (10-07-2025) ----------------------------------------------------------------------------------------------------------- * Update Packages and Dependencies * UI design improvements * Components are improved and updated with the latest version of Bootstrap [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.6.0-20-03-2025) v9.6.0 (20-03-2025) ----------------------------------------------------------------------------------------------------------- * Bug Fixes * Add Figma Section [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.5.0-14-12-2024) v9.5.0 (14-12-2024) ----------------------------------------------------------------------------------------------------------- * Enhance JavaScript Code Structure * Update Packages and Dependencies * Integrate Internationalization (i18n) in Sidebar * Improve Laptop Media UI * The Bootstrap color palette is also accessible through CSS variables [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.4.3-16-09-2024) v9.4.3 (16-09-2024) ----------------------------------------------------------------------------------------------------------- * UI design improvements [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.4.2-13-08-2024) v9.4.2 (13-08-2024) ----------------------------------------------------------------------------------------------------------- * UI design improvements [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.4.1-15-06-2024) v9.4.1 (15-06-2024) ----------------------------------------------------------------------------------------------------------- * UI design improvements * Add third-party plugin link [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.4.0-26-04-2024) v9.4.0 (26-04-2024) ----------------------------------------------------------------------------------------------------------- * Gulp update * Add Finance Dashboard * Add Online Course Admin Panel * Add Membership Admin Panel * Add Helpdesk Admin Panel * Add Invoice Admin Panel [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.3.0-02-03-2024) v9.3.0 (02-03-2024) ----------------------------------------------------------------------------------------------------------- * Package upgrades * Add invoice app * Added Rating * Added form wizard * Added Animation pages * Added Peity charts [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.2.0-11-12-2023) v9.2.0 (11-12-2023) ----------------------------------------------------------------------------------------------------------- * Layout was improved * Components are improved and updated with the latest version of Bootstrap * Plugin updated [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.1.2-19-10-2023) v9.1.2 (19-10-2023) ----------------------------------------------------------------------------------------------------------- * Horizontal menu bug fix [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.1.0-07-06-2023) v9.1.0 (07-06-2023) ----------------------------------------------------------------------------------------------------------- * Theme customization moved from "/dist/assets/js/config.js" to "/gulpfile.js" * Sidebar Submenu mouse event was improved * Introduce a new horizontal, compact, tab layout * Application UI design was improved [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog#v9.0.0-07-03-2023) v9.0.0 (07-03-2023) ----------------------------------------------------------------------------------------------------------- * Released v9.0 with all-new User Interface [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/bootstrap/dependencies) [NextRoadMap](https://phoenixcoded.gitbook.io/able-pro/bootstrap/roadmap) Last updated 2 months ago --- # Dependencies | Bootstrap | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/dependencies#dependencies) Dependencies Package Name Version Link @ckeditor/ckeditor5-build-balloon `43.2.0` [NPM LINK](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-balloon) @ckeditor/ckeditor5-build-classic `43.2.0` [NPM LINK](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic) @ckeditor/ckeditor5-build-decoupled-document `43.2.0` [NPM LINK](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document) @ckeditor/ckeditor5-build-inline `43.2.0` [NPM LINK](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline) @popperjs/core `2.11.8` [NPM LINK](https://www.npmjs.com/package/@popperjs/core) animate.css `4.1.1` [NPM LINK](https://www.npmjs.com/package/animate.css?activeTab=versions) apexcharts `4.1.1` [NPM LINK](https://www.npmjs.com/package/apexcharts) bootstrap `5.3.6` [NPM LINK](https://www.npmjs.com/package/bootstrap) bootstrap-slider `11.0.2` [NPM LINK](https://www.npmjs.com/package/bootstrap-slider) bootstrap-switch-button `1.1.0` [NPM LINK](https://www.npmjs.com/package/bootstrap-switch-button) browser-sync `3.0.2` [NPM LINK](https://www.npmjs.com/package/browser-sync) choices.js `11.1.0` [NPM LINK](https://www.npmjs.com/package/choices.js?ref=vanillalist) clipboard `2.0.11` [NPM LINK](https://www.npmjs.com/package/clipboard) croppr `2.3.1` [NPM LINK](https://www.npmjs.com/package/croppr) datatables.net-autofill `2.7.0` [NPM LINK](https://www.npmjs.com/package/datatables.net-autofill) datatables.net-autofill-bs5 `2.7.0` [NPM LINK](https://www.npmjs.com/package/datatables.net-autofill-bs5) datatables.net-bs5 `2.3.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-bs5) datatables.net-buttons `3.2.3` [NPM LINK](https://www.npmjs.com/package/datatables.net-buttons) datatables.net-buttons-bs5 `3.2.3` [NPM LINK](https://www.npmjs.com/package/datatables.net-buttons-bs5) datatables.net-colreorder `2.1.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-colreorder) datatables.net-colreorder-bs5 `2.1.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-colreorder-bs5) datatables.net-fixedcolumns `5.0.4` [NPM LINK](https://www.npmjs.com/package/datatables.net-fixedcolumns) datatables.net-fixedcolumns-bs5 `5.0.4` [NPM LINK](https://www.npmjs.com/package/datatables.net-fixedcolumns-bs5) datatables.net-fixedheader `4.0.2` [NPM LINK](https://www.npmjs.com/package/datatables.net-fixedheader) datatables.net-fixedheader-bs5 `4.0.2` [NPM LINK](https://www.npmjs.com/package/datatables.net-fixedheader-bs5) datatables.net-keytable `2.12.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-keytable) datatables.net-keytable-bs5 `2.12.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-bs5) datatables.net-responsive `3.0.4` [NPM LINK](https://www.npmjs.com/package/datatables.net-responsive) datatables.net-responsive-bs5 `3.0.4` [NPM LINK](https://www.npmjs.com/package/datatables.net-responsive-bs5) datatables.net-rowreorder `1.5.0` [NPM LINK](https://www.npmjs.com/package/datatables.net-rowreorder) datatables.net-rowreorder-bs5 `1.5.0` [NPM LINK](https://www.npmjs.com/package/datatables.net-rowreorder-bs5) datatables.net-scroller-bs5 `2.4.3` [NPM LINK](https://www.npmjs.com/package/datatables.net-scroller-bs5) datatables.net-select-bs5 `3.0.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-select-bs5) datatables.net-select-dt `3.0.1` [NPM LINK](https://www.npmjs.com/package/datatables.net-select-dt) dragula `3.7.3` [NPM LINK](https://www.npmjs.com/package/dragula) dropzone `5.9.3` [NPM LINK](https://www.npmjs.com/package/dropzone) feather-icons `4.29.2` [NPM LINK](https://www.npmjs.com/package/feather-icons) flatpickr `4.6.13` [NPM LINK](https://www.npmjs.com/package/flatpickr) formbouncerjs `1.4.6` [NPM LINK](https://www.npmjs.com/package/formbouncerjs) fslightbox `3.6.1` [NPM LINK](https://www.npmjs.com/package/fslightbox) fullcalendar `6.1.17` [NPM LINK](https://www.npmjs.com/package/fullcalendar) gulp-file-include `2.3.0` [NPM LINK](https://www.npmjs.com/package/gulp-file-include) gulp-sourcemaps `3.0.0` [NPM LINK](https://www.npmjs.com/package/gulp-sourcemaps) imask `7.4.0` [NPM LINK](https://www.npmjs.com/package/imask) i18next `25.2.1` [NPM LINK](https://www.npmjs.com/package/i18next) i18next-http-backend `3.0.2` [NPM LINK](https://www.npmjs.com/package/i18next-http-backend) intro.js `7.2.0` [NPM LINK](https://www.npmjs.com/package/intro.js?activeTab=readme) isotope-layout `3.0.6` [NPM LINK](https://www.npmjs.com/package/isotope-layout) jsvectormap `1.7.0` [NPM LINK](https://www.npmjs.com/package/jsvectormap) jszip `3.10.1` [NPM LINK](https://www.npmjs.com/package/jszip) notifier-js `1.0.0` [NPM LINK](https://www.npmjs.com/package/notifier) nouislider `15.8.1` [NPM LINK](https://www.npmjs.com/package/nouislider) pdfmake `0.2.20` [NPM LINK](https://www.npmjs.com/package/pdfmake) prismjs `1.30.0` [NPM LINK](https://www.npmjs.com/package/prismjs) quill `2.0.3` [NPM LINK](https://www.npmjs.com/package/quill) simple-datatables `10.0.0` [NPM LINK](https://www.npmjs.com/package/simple-datatables) simplebar `6.3.1` [NPM LINK](https://www.npmjs.com/package/simplebar) simplemde `1.11.2` [NPM LINK](https://www.npmjs.com/package/simplemde) sweetalert2 `11.22.0` [NPM LINK](https://www.npmjs.com/package/sweetalert2) tiny-slider `2.9.4` [NPM LINK](https://www.npmjs.com/package/tiny-slider) tinymce `7.9.1` [NPM LINK](https://www.npmjs.com/package/tinymce) type-ahead `2.1.0` [NPM LINK](https://www.npmjs.com/package/typeahead) uppy `4.16.0` [NPM LINK](https://www.npmjs.com/package/uppy) vanillajs-datepicker `1.3.4` [NPM LINK](https://www.npmjs.com/package/vanillajs-datepicker) vanillatree `0.0.3` [NPM LINK](https://www.npmjs.com/package/vanilla-tree-viewer?activeTab=code) wnumb `1.2.0` [NPM LINK](https://www.npmjs.com/package/wnumb) wow.js `1.2.2` [NPM LINK](https://www.npmjs.com/package/wowjs) ### [](https://phoenixcoded.gitbook.io/able-pro/bootstrap/dependencies#devlopment-dependencies) Devlopment Dependencies Package Name Version Link @babel/core `7.24.3` [NPM LINK](https://www.npmjs.com/package/@babel/core) @babel/preset-env `7.22.20` [NPM LINK](https://www.npmjs.com/package/@babel/preset-env) del `6.1.1` [NPM LINK](https://www.npmjs.com/package/del) gulp `4.0.2` [NPM LINK](https://www.npmjs.com/package/gulp) gulp-autoprefixer `6.1.0` [NPM LINK](https://www.npmjs.com/package/gulp-autoprefixer) gulp-babel `8.0.0` [NPM LINK](https://www.npmjs.com/package/gulp-babel) gulp-cssbeautify `3.0.1` [NPM LINK](https://www.npmjs.com/package/gulp-cssbeautify) gulp-cssmin `0.2.0` [NPM LINK](https://www.npmjs.com/package/gulp-cssmin) gulp-htmlmin `5.0.1` [NPM LINK](https://www.npmjs.com/package/gulp-htmlmin) gulp-inject `5.0.5` [NPM LINK](https://www.npmjs.com/package/gulp-inject) gulp-minify `3.1.0` [NPM LINK](https://www.npmjs.com/package/gulp-minify) gulp-sass `5.1.0` [NPM LINK](https://www.npmjs.com/package/gulp-sass) gulp-smushit `1.2.0` [NPM LINK](https://www.npmjs.com/package/gulp-smushit) gulp-uglify `3.0.2` [NPM LINK](https://www.npmjs.com/package/gulp-uglify) merge-stream `2.0.0` [NPM LINK](https://www.npmjs.com/package/merge-stream) prettier `3.2.5` [NPM LINK](https://www.npmjs.com/package/prettier) sass `1.71.1` [NPM LINK](https://www.npmjs.com/package/sass) [PreviousBox Container](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/box-container) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog) Last updated 4 months ago --- # Folder Structure | Django | Able Pro Copy Ablepro Django └─Admin ├── 📁applications ├── 📁src | └── 📁assets | ├── 📁css | ├── 📁fonts | ├── 📁images | ├── 📁js | ├── 📁json | └── 📁scss ├── 📁ablepro | ├── 📁__pycache__ | ├── 📄__init_.py | ├── 📄asgi.py | ├── 📄forms.py | ├── 📄settings.py | ├── 📄urls.py | ├── 📄views.py | └── 📄wsgi.py ├── 📁templates | ├── 📄index.html | ├── 📄readme.html | ├── 📁admins | ├── 📁application | ├── 📁chart | ├── 📁dashboard | ├── 📁demo | ├── 📁elements | ├── 📁forms | ├── 📁layouts | ├── 📁other | ├── 📁pages | ├── 📁table | └── 📁widget ├── 📄.gitignore ├── 📄.prettierignore ├── 📄db.sqlite3 ├── 📄manage.py ├── 📄db.sqlite3 ├── 📄package-libs-config.json ├── 📄package-lock.json ├── 📄package.json ├── 📄yarn.lock ├── 📄requirements.txt └── 📄README.md └─Starterkit └─ It's easy start with minimal structure of Admin project. └─Doc └─index.html #### [](https://phoenixcoded.gitbook.io/able-pro/django/folder-structure#light-able-django-folders-structure) Light Able Django Folders Structure (Root: Admin/) File/Folder Path Description 📂ablepro ablepro The main app of our project. 📁 src/assets src/assets/ All source file are here. db.sqlite3 db.sqlite3 All Database related migrations file. manage.py manage.py Django's command-line utility for administrative tasks. utils.py utils.py All meta data for each page is maintained here. #### [](https://phoenixcoded.gitbook.io/able-pro/django/folder-structure#light-able-django-templates) Light Able Django Templates File Path Description 🗄index.html templates/index.html Light Able Preview Page. 📁admins templates/admins All application pages are here. 📁 application templates/application All application pages are here. Like Account Profile, Chat, eCommerce, Social Media etc. 📁 chart templates/chart All chart pages are here. 📁 dashboard templates/chart Dashboard page is here. 📁 demo templates/chart All the Demo pages here. 📁 elements templates/elements All the alerts, buttons, dropdowns, modals etc. elements files are here. 📁 forms templates/forms All the forms those are used in our kit are here. 📁 layouts templates/layouts All the layout pages like headers, sidebars, customizer and components are here. 📁 other templates/other You can all other pages here. 📁 pages templates/pages You can all authentication related pages here. 📁 table templates/table All tables used in kit are here. 📁 widget templates/widget All UI widget pages are here. [PreviousGetting Started](https://phoenixcoded.gitbook.io/able-pro/django/getting-started) [Next📄Page Structure](https://phoenixcoded.gitbook.io/able-pro/django/page-structure) Last updated 1 year ago --- # RoadMap | Bootstrap | Able Pro Coming Soon [PreviousChangelog](https://phoenixcoded.gitbook.io/able-pro/bootstrap/changelog) Last updated 1 year ago --- # Directory Structure | Vue | Able Pro Under the `**able-pro-vuetify-vue/**` directory, You will find the following folder structure. Directory Structure Copy able-pro-vuetify-vue .. ├── public ├── src │ ├── _mockApis -> Mock JSON data to be used for apps │ ├── assets │ │ ├── images │ ├── components │ ├── layouts │ │ ├── blank │ │ ├── component │ │ ├── dashboard │ ├── plugins │ │ ├── vuetify.ts -> Contains theme style and theme │ ├── router -> Different route based on layouts │ ├── SCSS -> Theme overrides styles │ ├── stores -> Getters and Actions │ ├── types -> Types for TypeScript │ ├── utils │ │ ├── locales -> Languages .json files │ │ ├── helpers │ ├── views -> All Page views │ ├── App.vue -> Starting point of application │ ├── config.ts -> Template const value & live customizer ├── tsconfig.vite-config.json ├── vite.config.ts ├── tsconfig.json ├── index.html ├── package.json [PreviousQuick Start](https://phoenixcoded.gitbook.io/able-pro/vue/quick-start) [NextTheme UI](https://phoenixcoded.gitbook.io/able-pro/vue/theme-ui) Last updated 4 months ago --- # Page Structure | Angular | Able Pro #### [](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure#src-index.html) .**./src/index.html** index.html Copy Able Pro Angular Dashboard Template #### [](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure#src-app-app.component.html) **../src/app/app.component.html** app.component.html Copy #### [](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure#src-app-app-routing.module.ts) **../src/app/app-routing.module.ts** app-routing.module.ts Copy import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AdminComponent } from './demo/layout/admin'; import { EmptyComponent } from './demo/layout/empty/empty.component'; import { GuestComponent } from './demo/layout/front/guest.component'; import { AuthGuardChild } from './@theme/helpers/auth.guard'; ``` const routes: Routes = [\ {\ path: '',\ component: GuestComponent,\ children: [\ // load children modules with lazy load routing for without a common structure, like landing, contact-us, components, etc... \ ]\ },\ {\ path: '',\ component: AdminComponent,\ canActivateChild: [AuthGuardChild],\ children: [\ // load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc...\ ]\ },\ {\ path: '',\ component: EmptyComponent,\ children: [\ // load children modules with lazy load routing without a common structure, like login, signup, reset the password, maintenance, etc...\ ]\ },\ {\ path: '**',\ loadComponent: () => import('./demo/pages/maintenance/error/error.component').then((c) => c.ErrorComponent)\ }\ ]; #### [](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure#src-app-demo-layout-admin-admin.component.html) **../src/app/demo/layout/admin/admin.component.html** admin.component.html Copy
#### [](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure#src-app-demo-layout-empty.component.html) **../src/app/demo/layout/**empty.component.html empty.component.html Copy [PreviousDirectory Structure](https://phoenixcoded.gitbook.io/able-pro/angular/directory-structure) [NextTheme Configuration](https://phoenixcoded.gitbook.io/able-pro/angular/theme-configuration) Last updated 4 months ago --- # Directory Structure | Vue Laravel | Able Pro Under the `**able-pro-vue-laravel/full-version**` directory, You will find the following folder structure. Directory Structure Copy able-pro-vue-laravel/full-version .. ├── app -> Controllers & Models ├── bootstrap -> Contains cache and app.php ├── config -> Application's configuration files ├── database -> Migrations & seeds ├── public ├── resources │ ├── fonts │ ├── images │ ├── styles -> Theme overrides styles │ ├── ts │ │ ├── _mockApis -> Mock JSON data to be used for apps │ │ ├── @core -> Common default components auto imports │ │ ├── @layouts │ │ │ ├── components -> Layouts components │ │ ├── layouts │ │ │ ├── blank │ │ │ ├── component │ │ │ ├── default │ │ ├── pages -> All Pages views │ │ ├── plugins │ │ │ ├── fake-api │ │ │ │ ├── handlers -> Getters and Actions, it's types │ │ │ ├── vuetify -> Contains theme style and theme │ │ ├── utils │ │ │ ├── i18n │ │ │ │ ├── locales -> Languages .json file │ │ ├── views -> All Pages sub components │ │ ├── App.vue -> Starting point of application │ ├── views -> Laravel setup main file ├── routes -> Include routes web.php ├── storage -> Contains compile blade templates ├── tests -> For testing ├── .env -> Include Database credentials and other environment variables ├── eslint.config.js -> Eslint configuration ├── artisan -> Include artisan commands ├── auto-imports.d.ts -> Unplugin auto import file ├── components.d.ts -> Unplugin vue components ├── composer.json -> Dependencies used by composer ├── config.ts -> Template const value & live customizer ├── env.d.ts -> Typescript only(for router layout setup) ├── package.json -> Dependencies used by node ├── tsconfig.json -> Typescript configuration ├── typed-router.d.ts -> Unplugin vue router auto import files ├── vite.config.ts -> Laravel's vite file [PreviousInstallation](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/installation) [NextTheme UI](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/theme-ui) Last updated 10 months ago --- # Getting Started | Nodejs | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started#prerequisites) Prerequisites ---------------------------------------------------------------------------------------------------- #### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started#visual-studio) Visual Studio Make sure to have [Visual Studio](https://visualstudio.microsoft.com/vs/) downloaded on your machine.. Before you begin, make sure you have the following installed on your machine: 1. [Node.js](https://nodejs.org/) Make sure to have [Node.js](https://nodejs.org/) installed & running on your computer. If you already have installed Node on your computer, you can skip this step if your existing Node version is greater than 20 or 20. We suggest you to use the LTS version of Node.js. 2. Make sure to have the [NPM](https://www.npmjs.com/) installed & running on your computer. If you already have installed NPM on your computer, you can skip this step. 3. A code editor of your choice (e.g., Visual Studio Code, Atom, Sublime Text) ### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started#build-assets) Build Assets Before running the application we need to build theme assets: 1. Open your project in VS code 2. Start a command prompt window or terminal and change the directory to full-version/ 3. Install packages using the following commands Copy npm install npm run build Copy This command will fetch all dependencies listed in /package.json and place them into/node_modules folder. #### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started#run-project) Run Project To run the Nodejs application navigate your prompt to `project` folder and run the following command. This command will listen for changes and hot reload them. Copy npm run start Keep your prompt running by default application is served on port [8000](http://localhost:8000/) Copy Enjoy your development with Able-pro [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/nodejs) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/nodejs/folder-structure) Last updated 1 year ago --- # Changelog | Tailwind - HTML | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/changelog#v1.2.0-10-07-2025) v1.2.0 (10-07-2025) --------------------------------------------------------------------------------------------------------------- * Updated to Tailwind 4 * Other Packages and Dependencies updates * UI design improvements [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/changelog#v1.1.1-20-03-2025) v1.1.1 (20-03-2025) --------------------------------------------------------------------------------------------------------------- * Bug Fixes * Added Figma Section [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/changelog#v1.1.0-14-12-2024) v1.1.0 (14-12-2024) --------------------------------------------------------------------------------------------------------------- * Update Packages and Dependencies * Integrate Internationalization (i18n) in Sidebar * Improve Laptop Media UI [](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/changelog#v1.0.0-16-09-2024) v1.0.0 (16-09-2024) --------------------------------------------------------------------------------------------------------------- * Released v1.0 with all-new User Interface [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/dependencies) [NextRoadMap](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/roadmap) Last updated 4 months ago --- # 📄Page Structure | Django | Able Pro Copy Django {% load static %} {% block title %} {% endblock %} {% block css1 %} {% endblock %} {% include './head-css.html' %} {% block css2 %} {% endblock %} {% include './layout-vertical.html' %}
{% block mainContent %} {% endblock %}
{% include './footer-block.html' %} {% include './customizer.html' %} {% block js1 %} {% endblock %} {% include './footer-js.html' %} {% block js2 %} {% endblock %} ### [](https://phoenixcoded.gitbook.io/able-pro/django/page-structure#light-able-django-folders-structure) Layout settings You can change the default layout in the templates/index.html file in the body tag Copy Attribute Description data-pc-preset= "preset-1" To set the your primary theme color you can change \['preset-1' \] for different color. data-pc-sidebar-caption= "true" To set the caption on. data-pc-layout = "vertical" To set the vertical Sidebar. data-pc-direction = "ltr" To set the layout direction left to right. data-pc-theme = "light" To set the layout theme light. data-pc-theme = "dark" To set the layout theme dark. [PreviousFolder Structure](https://phoenixcoded.gitbook.io/able-pro/django/folder-structure) [NextCustomizer](https://phoenixcoded.gitbook.io/able-pro/django/customizer) Last updated 1 year ago --- # 📄Page Structure | Flask | Able Pro In Flask, maintaining a consistent layout across multiple web pages is achieved through the use of base templates and template inheritance, We have created different **base layouts** in templates/layouts like **main-layout.html, auth-layout.html, component-layout.html** for different views for different pages. Copy {% block title %} {% endblock %} {% block css1 %} {% endblock %} {% include './head-css.html' %} {% block css2 %} {% endblock %} {% include './layout-vertical.html' %}
{% block mainContent %} {% endblock %}
{% include './footer-block.html' %} {% include './customizer.html' %} {% block js1 %} {% endblock %} {% include './footer-js.html' %} {% block js2 %} {% endblock %} ### [](https://phoenixcoded.gitbook.io/able-pro/flask/page-structure#light-able-django-folders-structure) Layout settings You can change the default layout in the **templates/layouts/main-layout.html** file in the body tag Copy Attribute Description data-pc-preset= "preset-1" To set the your primary theme color you can change \['preset-1' \] for different color. data-pc-sidebar-caption= "true" To set the caption on. data-pc-layout = "vertical" To set the vertical Sidebar. data-pc-direction = "ltr" To set the layout direction left to right. data-pc-theme = "light" To set the layout theme light. data-pc-theme = "dark" To set the layout theme dark. [PreviousFolder Structure](https://phoenixcoded.gitbook.io/able-pro/flask/folder-structure) [NextCustomizer](https://phoenixcoded.gitbook.io/able-pro/flask/customizer) Last updated 1 year ago --- # Getting Started | sveltekit | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/sveltekit/getting-started#prerequisites) Prerequisites ------------------------------------------------------------------------------------------------------- #### [](https://phoenixcoded.gitbook.io/able-pro/sveltekit/getting-started#visual-studio) Visual Studio Make sure to have [Visual Studio](https://visualstudio.microsoft.com/vs/) downloaded on your machine. Before you begin, make sure you have the following installed on your machine: * [Node.js](https://nodejs.org/en) ( Node v20.\*) ### [](https://phoenixcoded.gitbook.io/able-pro/sveltekit/getting-started#build-assets) Build Assets Before running the application we need to build theme assets: 1. Open your project to vs code 2. Start a command prompt window or terminal and change the directory to able-pro/ 3. Install packages using one of the following commands Copy yarn install OR npm install **This command will fetch all dependencies listed in** `**/package.json**` **and place them into**`**/node_modules**` **folde**r. Copy npm run dev [PreviousIntroduction](https://phoenixcoded.gitbook.io/able-pro/sveltekit) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/sveltekit/folder-structure) Last updated 1 year ago --- # Customizer | Bootstrap | Able Pro Able Pro comes with tones of layout customizer option * [​Light & Dark Layout](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/light-and-dark-layout) * [​Theme Contrast](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/theme-contrast) * [Preset Colors](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/preset-colors) * [Sidebar Caption](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/sidebar-caption) * [​RTL Layout](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/rtl-layout) * [​Box Container](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/box-container) If you made any change in **/gulpfile.js** file you need to run the **Gulp** command to get the change in the theme. [PreviousPage Structure](https://phoenixcoded.gitbook.io/able-pro/bootstrap/structure/page-structure) [NextLight & Dark Layout](https://phoenixcoded.gitbook.io/able-pro/bootstrap/customizer/light-and-dark-layout) Last updated 1 year ago --- # RoadMap | Tailwind - HTML | Able Pro Coming Soon [PreviousChangelog](https://phoenixcoded.gitbook.io/able-pro/tailwind-html/changelog) --- # Quick Start | React | Able Pro ### [](https://phoenixcoded.gitbook.io/able-pro/react/quick-start#installation) Installation Navigate to your root folder `**(i.e. able-pro-material-react)**` Copy c:\>cd able-pro-material-react\full-version Install packages by npm according to your preferences. Here we are using the package manager. Copy c:\able-pro-material-react\full-version> npm i **We would recommend yarn over npm**. Why? See this: [https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/](https://www.whitesourcesoftware.com/free-developer-tools/blog/npm-vs-yarn-which-should-you-choose/) ### [](https://phoenixcoded.gitbook.io/able-pro/react/quick-start#start) Start After package installation, you can start your app by using `**npm start**` the command Copy c:\able-pro-material-react\full-version> npm run start This will start your local server at `**http://localhost:3000**` Also, your terminal shows the following. Copy Compiled successfully! You can now view able-pro-material-react in the browser. Local: http://localhost:3000 On Your Network: http://192.168.29.77:3000 Note that the development build is not optimized. To create a production build, use npm run build. ### [](https://phoenixcoded.gitbook.io/able-pro/react/quick-start#build-and-deploy) Build & Deploy This might be too early to deploy, but it is always good to know how to deploy. To build your app for production use `**npm run build**` Command Copy c:\able-pro-material-react\full-version> yarn build or c:\able-pro-material-react\full-version> npm run build **You’ll need to have Node v22.x.x or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. [PreviousPre-requisites](https://phoenixcoded.gitbook.io/able-pro/react/pre-requisites) [NextFolder Structure](https://phoenixcoded.gitbook.io/able-pro/react/folder-structure) Last updated 2 months ago --- # Theme Configuration | Angular | Able Pro #### [](https://phoenixcoded.gitbook.io/able-pro/angular/theme-configuration#src-app-app-config.ts) ../src/app/app-config.ts app-config.ts Copy export class AbleProConfig { static layout = 'vertical'; // vertical, horizontal, compact static isDarkMode = 'light'; // light, dark, auto-mode static theme_color = 'blue-theme'; // blue-theme, indigo-theme, purple-theme, pink-theme, red-theme, orange-theme, yellow-theme, green-theme, teal-theme, cyan-theme static isRtlLayout = false; // false true static isBox_container = false; // false true static theme_contrast = false; //true false static menu_caption = false; // true false static isLanding = true; static i18n = 'en'; // en, fr, ro, cn } export const DASHBOARD_PATH = '/dashboard/default'; You can edit this file at `**[ ../src/app/app-config.ts ]**` Option Default Data Type Description **layout** vertical String `vertical`, `horizontal`, `compact` **isDarkMode** light String `light`, `dark`, `auto` **theme\_color** blue-theme String `blue-theme, indigo-theme, purple-theme,` `pink-theme,red-theme,orange-theme, yellow-theme, green-theme, teal-theme,cyan-theme` **isRtlLayout** false Boolean `true`, `false` **isBox\_container** false Boolean `true`, `false` **theme\_contrast** false Boolean `true`, `false` **menu\_caption** false Boolean `true`, `false` **isLanding** true Boolean `true`, `false` **i18n** en String `en`, `fr`, `ro`, `cn` [PreviousPage Structure](https://phoenixcoded.gitbook.io/able-pro/angular/page-structure) [NextTheme Layout](https://phoenixcoded.gitbook.io/able-pro/angular/theme-layout) Last updated 4 months ago --- # Customizer | Flask | Able Pro You can change the default layout in the **templates/layouts/main-layout.html** file in the body tag Copy Attribute Description data-pc-preset= "preset-1" To set the your primary theme color you can change \['preset-1' \] for different color. data-pc-sidebar-caption= "true" To set the caption on. data-pc-layout = "vertical" To set the vertical Sidebar. data-pc-direction = "ltr" To set the layout direction left to right. data-pc-theme = "light" To set the layout theme light. data-pc-theme = "dark" To set the layout theme dark. [Previous📄Page Structure](https://phoenixcoded.gitbook.io/able-pro/flask/page-structure) [NextDependencies](https://phoenixcoded.gitbook.io/able-pro/flask/dependencies) Last updated 1 year ago --- # Folder Structure | sveltekit | Able Pro Copy Sveltekit ├── 📁.svelte-kit ├── 📁src | ├── 📁lib | | ├── 📁assets | | | ├── 📁css | | | ├── 📁fonts | | | ├── 📁images | | | ├── 📁js | | | ├── 📁json | | | └── 📁scss | | ├── 📁Components | | | └── 📁Layouts | | | └── 📁Partials | | ├── 📁images | | └── 📁stores | | ├── 📄activeMenuStore.js | | └── 📄layoutStore.js | | | ├── 📁routes | | ├── 📁(layout-vertical) | | ├── 📁component | | ├── 📁pages | | ├── 📄+layout.svelte | | ├── 📄+page.js | | └── 📄+page.svelte | └── 📄app.html ├── 📁static | ├── 📄robots.txt | └── 📄favicon.png | ├── 📄.gitignore ├── 📄.npmrc ├── 📄.prettierignore ├── 📄.prettierrc ├── 📄eslint.config ├── 📄package-lock.json ├── 📄package.json ├── 📄README.md ├── 📄svelte.config.js └── 📄vite.config.js [PreviousGetting Started](https://phoenixcoded.gitbook.io/able-pro/sveltekit/getting-started) [NextPage Structure](https://phoenixcoded.gitbook.io/able-pro/sveltekit/page-structure) Last updated 1 year ago --- # Folder Structure | Nodejs | Able Pro Copy Ablepro Nodejs └─ Admin ├── 📁 routes | └── routes.js ├── 📁 src | └── 📁 assets | ├── 📁 css | ├── 📁 scss | ├── 📁 fonts | ├── 📁 images | ├── 📁 js | └── 📁 json ├── 📁 views | ├── 📁 admins | ├── 📁 application | ├── 📁 chart | ├── 📁 dashboard | ├── 📁 demo | ├── 📁 elements | ├── 📁 forms | ├── 📁 layouts | └── 📁 component | ├── 📁 other | ├── 📁 pages | ├── 📁 table | ├── 📁 widget | ├── index.ejs | ├── readme.html ├── .env ├── index.js ├── package.json ├── package-lock.json ├── package.json └── vite.config.js └─ Starterkit └─ Docs #### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/folder-structure#light-able-nodejs-folders-structure) Light Able NodeJs Folders Structure File/Folder Path Description 📁 routes routes/ All the routing file are here. 📁 src src/ All assets and scss and js is here If you change in these files you should run gulp command again. 📁 views views/ All Ejs templates are stored here. #### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/folder-structure#light-able-nodejs-templates) Light Able NodeJs Views File Path Description 🗄index.ejs views/index.ejs Light Able Preview Page. 📁admins views/admins All admins pages are here. 📁 application views/application All application pages are here. Like Account Profile, Chat, eCommerce, Social Media etc. 📁 chart views/chart All chart pages are here. 📁 dashboard views/chart Dashboard page is here. 📁 demo views/chart All the Demo pages here. 📁 elements views/elements All the alerts, buttons, dropdowns, modals etc. elements files are here. 📁 forms views/forms All the forms those are used in our kit are here. 📁 layouts views/layouts All the layout pages like headers, sidebars, customizer and components are here. 📁 other views/other You can all other pages here. 📁 pages views/pages You can all authentication related pages here. 📁 table views/table All tables used in kit are here. 📁 widget views/widget All UI widget pages are here. [PreviousGetting Started](https://phoenixcoded.gitbook.io/able-pro/nodejs/getting-started) [Next📄Page Structure](https://phoenixcoded.gitbook.io/able-pro/nodejs/page-structure) Last updated 1 year ago --- # Support | .Net | Able Pro **Good to know:** Technical support only lies for any issues lies in Able pro. Support is not available for any type of installation, 3rd party plugin integration, feature addition, etc... Create a Ticket on our Support Panel. * [https://phoenixcoded.authordesk.app/](https://phoenixcoded.authordesk.app/) [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/.net/dependencies) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/.net/changelog) Last updated 1 year ago --- # Support | CodeIgnitor | Able Pro **Good to know:** Technical support only lies for any issues lies in Able Pro. Support is not available for any type of installation, 3rd party plugin integration, feature addition, etc... Create a Ticket on our Support Panel. * [https://phoenixcoded.authordesk.app/](https://phoenixcoded.authordesk.app/) [PreviousChangelog](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog) Last updated 1 year ago --- # Changelog | CodeIgnitor | Able Pro [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.5.2-17-07-2025) v1.5.2(17-07-2025) ------------------------------------------------------------------------------------------------------------- * Update Packages and Dependencies * UI design improvements * Components are improved and updated with the latest version of Bootstrap [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.5.1-20-03-2025) v1.5.1 (20-03-2025) -------------------------------------------------------------------------------------------------------------- * Bug Fixes * Added Figma Section [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.5.0-14-12-2024) v1.5.0 (14-12-2024) -------------------------------------------------------------------------------------------------------------- * Enhance JavaScript Code Structure * Update Packages and Dependencies * Integrate Internationalization (i18n) in Sidebar * Improve Laptop Media UI * The Bootstrap color palette is also accessible through CSS variables [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.4.3-16-09-2024) v1.4.3 (16-09-2024) -------------------------------------------------------------------------------------------------------------- * UI design improves [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.4.2-13-08-2024) v1.4.2 (13-08-2024) -------------------------------------------------------------------------------------------------------------- * UI design improves [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.4.1-15-06-2024) v1.4.1 (15-06-2024) -------------------------------------------------------------------------------------------------------------- * UI design improves * Add third-party plugin link [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.4.0-26-04-2024) v1.4.0 (26-04-2024) -------------------------------------------------------------------------------------------------------------- * Gulp update * Add Finance Dashboard * Add Online Course Admin Panel * Add Membership Admin Panel * Add Helpdesk Admin Panel * Add Invoice Admin Panel [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.3.0-02-03-2024) v1.3.0 (02-03-2024) -------------------------------------------------------------------------------------------------------------- * Package upgrades * Add invoice app * Added Rating * Added form wizard * Added Animation pages * Added Peity charts [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.2.0-11-12-2023) v1.2.0 (11-12-2023) -------------------------------------------------------------------------------------------------------------- * Layout was improved * Components are improved and updated with the latest version of Bootstrap * Plugin updated [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.1.2-19-10-2023) v1.1.2 (19-10-2023) -------------------------------------------------------------------------------------------------------------- * Design Fixes * Horizontal bug fix [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.1.0-07-06-2023) v1.1.0 (07-06-2023) -------------------------------------------------------------------------------------------------------------- * Theme customization moved from "/dist/assets/js/config.js" to "app/Config/Constants.php" * Sidebar Submenu mouse event was improved * Introduce a new horizontal, compact, tab layout * Application UI design was improved [](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/changelog#v1.0.0-12-11-2022) v1.0.0 (12-11-2022) -------------------------------------------------------------------------------------------------------------- * Initial Release [PreviousPlugins](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/plugins) [NextSupport](https://phoenixcoded.gitbook.io/able-pro/code-ignitor/support) Last updated 4 months ago --- # 📄Page Structure | Nodejs | Able Pro Copy Ejs <%- title %> <%- css1 %> <%- include('./head-css') %> <%- css2 %> <%- include('./layout-vertical') %>
<%- mainContent %>
<%- include('./footer-block') %> <%- include('./customizer') %> <%- js1 %> <%- include('./footer-js') %> <%- js2 %> ### [](https://phoenixcoded.gitbook.io/able-pro/nodejs/page-structure#light-able-django-folders-structure) Layout settings You can change the default layout in the **views/main-layout.html** file in the body tag Copy Attribute Description data-pc-preset= "preset-1" To set the your primary theme color you can change \['preset-1' \] for different color. data-pc-sidebar-caption= "true" To set the caption on. data-pc-layout = "vertical" To set the vertical Sidebar. data-pc-direction = "ltr" To set the layout direction left to right. data-pc-theme = "light" To set the layout theme light. data-pc-theme = "dark" To set the layout theme dark. [PreviousFolder Structure](https://phoenixcoded.gitbook.io/able-pro/nodejs/folder-structure) [NextCustomizer](https://phoenixcoded.gitbook.io/able-pro/nodejs/customizer) Last updated 1 year ago --- # Support | Flask | Able Pro **Good to know:** Technical support only lies for any issues lies in Able pro. Support is not available for any type of installation, 3rd party plugin integration, feature addition, etc... Create a Ticket on our Support Panel. * [https://phoenixcoded.authordesk.app/](https://phoenixcoded.authordesk.app/) [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/flask/dependencies) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/flask/changelog) Last updated 1 year ago --- # Customizer | Nodejs | Able Pro You can change the default layout in the **views/main-layout.html** file in the body tag Copy Attribute Description data-pc-preset= "preset-1" To set the your primary theme color you can change \['preset-1' \] for different color. data-pc-sidebar-caption= "true" To set the caption on. data-pc-layout = "vertical" To set the vertical Sidebar. data-pc-direction = "ltr" To set the layout direction left to right. data-pc-theme = "light" To set the layout theme light. data-pc-theme = "dark" To set the layout theme dark. [Previous📄Page Structure](https://phoenixcoded.gitbook.io/able-pro/nodejs/page-structure) [NextDependencies](https://phoenixcoded.gitbook.io/able-pro/nodejs/dependencies) Last updated 1 year ago --- # Support | Django | Able Pro **Good to know:** Technical support only lies for any issues lies in Able pro. Support is not available for any type of installation, 3rd party plugin integration, feature addition, etc... Create a Ticket on our Support Panel. * [https://phoenixcoded.authordesk.app/](https://phoenixcoded.authordesk.app/) [PreviousDependencies](https://phoenixcoded.gitbook.io/able-pro/django/dependencies) [NextChangelog](https://phoenixcoded.gitbook.io/able-pro/django/changelog) Last updated 4 months ago --- # Page Structure | sveltekit | Able Pro Copy sveltekit