Explore Our Templates 🚀
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 filedrawer.scss: Drawer related Sass filefooter.scss: Footer related Sass fileheader.scss: Header related Sass filehorizontal-menu.scss: Horizontal menu Sass filemixins.scss: Mixins Sass filenav.scss: Nav Sass filenavbar-menu.scss: Navbar Sass filestyle.scss: Master Sass filevariables.scss: All the variables related Sass filevertical-classic-menu.scss: Vertical classic menu Sass filevertical-icon-menu.scss: Vertical icon menu Sass file
Installation
To get started follow this steps.
- First of all it's required to Install Node.js 18 or later and npm / yarn.
- 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.
- 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.
- Now you can run this Next.js project by using following command for your application development, make the necessary changes.
- To builds the app for production you can use following commands.
npm install
or
yarn install
npm run dev
or
yarn run dev
npm run build
or
yarn build