Introduction

Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications. Developed using the Next.js and React-Bootstrap framework.

File Structure

We have arranged all the files as follows.

								
HTML

├──📁 dist
    ├──📁 css
    ├──📁 fonts
    ├──📁 img
    └──📁 js

├──📁 src
    └──📁 scss
        ├── apps.scss
        ├── drawer.scss
        ├── footer.scss
        ├── header.scss
        ├── horizontal-menu.scss
        ├── mixins.scss
        ├── nav.scss
        ├── navbar-menu.scss
        ├── style.scss
        ├── variables.scss
        ├── vertical-classic-menu.scss
        └── vertical-icon-menu.scss

├──📁 vendors
    └── All Required plugins files

├── All Html Pages

├── .jshintrc
├── Gruntfile.js / gulpfile.js
├── package.json
└── package-lock.json

								
														
React-Jampack
├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    └──📁 src
        ├──📁 assets
       └──📁 dist
           ├──📁 css
           ├──📁 fonts
           └──📁 img
    
       └──📁 scss
           ├── apps.scss
           ├── drawer.scss
           ├── footer.scss
           ├── header.scss
           ├── horizontal-menu.scss
           ├── mixins.scss
           ├── nav.scss
           ├── navbar-menu.scss
           ├── style.scss
           ├── variables.scss
           ├── vertical-classic-menu.scss
           └── vertical-icon-menu.scss
    
        ├──📁 components
       └── All Custom Components
    
        ├──📁 config     /* Theme Configurations */
    
        ├──📁 layout     /* Template Layouts */
    
        ├──📁 redux      /* Redux Store Setup */
    
        ├──📁 routes     /* React Router Routes */
    
        ├──📁 util       /* Utility Functions */
       └── Utilities functions
    
        ├──📁 views      /* JSX Pages */
       └── All JSX Pages Here
    
        ├── App.js      /* Main Route */
        └── index.js    /* Application root file */

													
														
Next-Jampack

├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    
    ├──📁 public
    ├──📁 src
    	
    	├──📁 app
    	   
    	   ├──📁 (app layout)
    	      ├── layout.jsx      /*layout for app pages*/
    	      └── All app pages (jsx) here
    	   
    	   └──📁 (auth layout)
    		├── layout.jsx      /*layout for auth pages*/
    		└── All authentication pages (jsx) here
    	
    	├──📁 assets
    	   └──📁 dist
    		└──📁 img
    	
    	├──📁 components
    	   └── All Custom Components
    	
    	├──📁 context      /*Global state management like redux*/
    	   ├──📁 reducer
    	   └── globalStateProvider.js
    	
    	├──📁 data
    	   └── External data
    	
    	├──📁 layout
    	   ├──📁 app-layout
    	   ├──📁 auth-layout
    	   ├──📁 footer
    	   ├──📁 header
    	   └──📁 sidebar
    	
    	└── styles
    	    ├──📁 css
    	    ├──📁 fonts
    	    └──📁 scss
    		├── apps.scss
    		├── drawer.scss
    		├── footer.scss
    		├── header.scss
    		├── horizontal-menu.scss
    		├── mixins.scss
    		├── nav.scss
    		├── navbar-menu.scss
    		├── style.scss
    		├── variables.scss
    		├── vertical-classic-menu.scss
    		└── vertical-icon-menu.scss
    
    ├── .eslintrc.json
    ├── .gitignore
    ├── jsconfig.json
    ├── next.config.json
    ├── package.json
    └── README.md

													
														
Remix-Jampack

├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    
    ├──📁 app
    	
    	├──📁 @hk-components
    	   └── All Custom Components
    	
    	├──📁 assets
    	   └──📁 img      /*all images here*/
    	
    	├──📁 context      /*Global state management like redux*/
    	   ├──📁 reducer
    	   └── globalStateProvider.js
    	
    	├──📁 data
    	   └── External data
    	
    	├──📁 layout
    	   ├──📁 app-layout
    	   ├──📁 auth-layout
    	   ├──📁 footer
    	   ├──📁 header
    	   └──📁 sidebar
    	
    	├──📁 apps
    	   └── Apps pages (jsx)      /*All app routes here*/
    	
    	├──📁 auth
    	   └── Authentication pages (jsx)      /*All authentications routes here*/
    	
    	├── styles
    	   ├──📁 css
    	   ├──📁 fonts
    	   └──📁 scss
    	      ├── apps.scss
    	      ├── drawer.scss
    	      ├── footer.scss
    	      ├── header.scss
    	      ├── horizontal-menu.scss
    	      ├── mixins.scss
    	      ├── nav.scss
    	      ├── navbar-menu.scss
    	      ├── style.scss
    	      ├── variables.scss
    	      ├── vertical-classic-menu.scss
    	      └── vertical-icon-menu.scss
    	
    	├── entry.client.jsx      /*This file is the entry point for the browser.*/
    	├── entry.server.jsx      /*This module should render the markup for the current page using.*/
    	└── root.jsx              /*The main entry point of the router.*/
    
    ├──📁 public
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── jsconfig.json
    ├── package.json
    ├── README.md
    └── remix.config.js      /*If you do not want file based routing, then you can define your routes here.*/

													
								
Vue-Jampack

├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    
    ├──📁 public
    
    ├──📁 src
    	
    	├──📁 assets
    	   └──📁 img /* all images here */
    	
    	├──📁 components /* Required Components */
    	
    	├──📁 data /* External data */
    	
    	├──📁 hk-components /* Custom Components */
    	
    	├──📁 layout
    	   ├──📁 app-layout
    	   ├──📁 auth-layout
    	   ├──📁 footer
    	   ├──📁 header
    	   └──📁 sidebar
    	
    	├──📁 pages /* All view pages */
    	
    	├──📁 router /* Pages routing */
    	
    	├──📁 stores /* Store for Pinia */
    	
    	├──📁 styles
    	   ├──📁 css
    	   ├──📁 fonts
    	   └──📁 scss
    	       ├── apps.scss
    	       ├── drawer.scss
    	       ├── footer.scss
    	       ├── header.scss
    	       ├── horizontal-menu.scss
    	       ├── mixins.scss
    	       ├── nav.scss
    	       ├── navbar-menu.scss
    	       ├── style.scss
    	       ├── variables.scss
    	       ├── vertical-classic-menu.scss
    	       └── vertical-icon-menu.scss
    	
    	├──📁 util
    	
    	├── App.vue /* Root component, entry point */
    	└── main.js /* Application entry */
    
    ├── .eslintrc.cjs
    ├── .gitignore
    ├── index.html /* Main HTML file */
    ├── jsconfig.json
    ├── package.json
    ├── README.md
    └── vitest.config.js

								
								
Nuxt-Jampack

├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    
    ├──📁 public
    
    ├──📁 assets
       └──📁 img /* all images here */
    
    ├──📁 components /* Required Components */
    
    ├──📁 data /* External data */
    
    ├──📁 hk-components /* Custom Components */
    
    ├──📁 layout
       ├──📁 app-layout
       ├──📁 auth-layout
       ├──📁 footer
       ├──📁 header
       └──📁 sidebar
    
    ├──📁 middleware /* Required Middlewares */
    
    ├──📁 mixins
    
    ├──📁 pages /* All view pages */
    
    ├──📁 plugins /* Globally used plugins */
    
    ├──📁 public
    
    ├──📁 server
    
    ├──📁 stores /* Store for Pinia */
    
    ├──📁 styles
       ├──📁 css
       ├──📁 fonts
       └──📁 scss
           ├── apps.scss
           ├── drawer.scss
           ├── footer.scss
           ├── header.scss
           ├── horizontal-menu.scss
           ├── mixins.scss
           ├── nav.scss
           ├── navbar-menu.scss
           ├── style.scss
           ├── variables.scss
           ├── vertical-classic-menu.scss
           └── vertical-icon-menu.scss
    
    ├──📁 util
    
    ├── .gitignore
    ├── app.vue /* Root component, entry point */
    ├── error.vue /* Custom 404 page */
    ├── nuxt.config.ts /* Nuxt configuration file */
    ├── package.json
    └── README.md

								
								
Svelte-Jampack

├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    
    ├──📁 src
    	
    	├──📁 assets
    	   └──📁 img /* all images here */
    	
    	├──📁 components /* Required Components */
    	
    	├──📁 data /* External data */
    	
    	├──📁 hk-components /* All Custom Components */
    	
    	├──📁 layout
    	   ├──📁 app-layout
    	   ├──📁 auth-layout
    	   ├──📁 footer
    	   ├──📁 header
    	   └──📁 sidebar
    	
    	├──📁 lib /* Other required functions like store */
    	
    	├──📁 routes /* Pages routing */
    	
    	├──📁 styles
    	   ├──📁 css
    	   ├──📁 fonts
    	   └──📁 scss
    	       ├── apps.scss
    	       ├── drawer.scss
    	       ├── footer.scss
    	       ├── header.scss
    	       ├── horizontal-menu.scss
    	       ├── mixins.scss
    	       ├── nav.scss
    	       ├── navbar-menu.scss
    	       ├── style.scss
    	       ├── variables.scss
    	       ├── vertical-classic-menu.scss
    	       └── vertical-icon-menu.scss
    	
    	└── app.html /* Entry point of the app */
    
    ├── .eslint.config.js
    ├── .gitignore
    ├── jsconfig.json
    ├── package.json
    ├── README.md
    └── vite.config.js

								
CSS Folder

This folder includes style.css and other third party css files that are included in the template.

SCSS Folder
  • apps.scss: Application related Sass file
  • drawer.scss: Drawer related Sass file
  • footer.scss: Footer related Sass file
  • header.scss: Header related Sass file
  • horizontal-menu.scss: Horizontal menu Sass file
  • mixins.scss: Mixins Sass file
  • nav.scss: Nav Sass file
  • navbar-menu.scss: Navbar Sass file
  • style.scss: Master Sass file
  • variables.scss: All the variables related Sass file
  • vertical-classic-menu.scss: Vertical classic menu Sass file
  • vertical-icon-menu.scss: Vertical icon menu Sass file
Installation

To get started follow this steps.

  1. First of all it's required to Install Node.js 18 or later and npm / yarn.
  2. You can download product zip file from Themeforest or other some sources, Unzip the zip file that you have downloaded from Themeforest. Inside the zip file, you will find 3 seperated projects and documentation file for documentation.
  3. Open your favorite console application (Terminal, iTerm, Command Prompt etc.). Navigate to a your favorite project layout folder (classic, horizontal or compact) and Install packages using following commands. This command will install all the required Node.js modules into the node_modules directory inside project folder. And now, you are ready to run the project for the first time.
  4. 														
    npm install
    or 
    yarn install
    													
  5. Now you can run this Next.js project by using following command for your application development, make the necessary changes.
  6. 														
    npm run dev
    or 
    yarn run dev
    													
  7. To builds the app for production you can use following commands.
  8. 														
    npm run build
    or 
    yarn build