v1.0Bootstrap 5 responsive admin template
documented by Sean Ngu
Updated on: 05/February/2025
By: Sean Ngu
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to send your question via ThemeForest. Thanks so much!
Follow the following step to install the Next.js in your localhost
You may refer to their official documentation for how to setup the node js & npm.
Setup Guide
<!-- run the following command --> cd /your-path-url/template_nextjs npm install <!-- Start the development server --> npm run dev <!-- Build the project --> npm run build <!-- browse the url --> http://localhost:3000/
Verify that you are running at least node 22.x.x or later and npm 11.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
File structure overview for Next.js Version
template_nextjs/
├── eslint.config.mjs # ESLint configuration
├── next-env.d.ts # Next.js TypeScript environment declaration
├── next.config.ts # Next.js configuration file
├── package.json # Project dependencies and scripts
├── README.md # Project documentation
├── tsconfig.json # TypeScript configuration
├── public/ # Public assets (e.g., images, fonts)
└── src/ # Source code
├── global.d.ts # Global TypeScript declarations
├── app/ # Next.js app directory (e.g., routing, pages)
├── components/ # Reusable UI components
├── composables/ # Custom hooks or composable utilities
├── config/ # Global application configurations
├── styles/ # HUD scss styles
└── utils/ # Utility functions
Below is the code from /app/layout.tsx which include the header, sidebar, content, footer and theme panel. You may remove the component if you are not using it.
'use client';
// css
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@fortawesome/fontawesome-free/css/all.css';
import 'react-perfect-scrollbar/dist/css/styles.css';
import '@/styles/styles.scss';
import { useEffect } from 'react';
import Header from '@/components/header/header';
import TopNav from '@/components/top-nav/top-nav';
import Sidebar from '@/components/sidebar/sidebar';
import Footer from '@/components/footer/footer';
import ThemePanel from '@/components/theme-panel/theme-panel';
import { AppSettingsProvider, useAppSettings } from '@/config/app-settings';
function Layout({ children }: { children: React.ReactNode }) {
const { settings } = useAppSettings();
return (
<div className={
'app ' +
(settings.appBoxedLayout ? 'app-boxed-layout ' : '') +
(settings.appContentFullHeight ? 'app-content-full-height ' : '') +
(settings.appHeaderNone ? 'app-without-header ' : '') +
(settings.appSidebarNone ? 'app-without-sidebar ' : '') +
(settings.appSidebarCollapsed ? 'app-sidebar-collapsed ' : '') +
(settings.appFooter ? 'app-footer-fixed ' : '') +
(settings.appTopNav ? 'app-with-top-nav ' : '')
}>
{settings.appTopNav && (<TopNav />)}
{!settings.appHeaderNone && (<Header />)}
{!settings.appSidebarNone && (<Sidebar />)}
{!settings.appContentNone && (<div className={'app-content '+ settings.appContentClass }>{children}</div>)}
{settings.appContentNone && (<>{children}</>)}
{settings.appFooter && (<Footer />)}
<ThemePanel />
</div>
);
}
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
useEffect(() => {
const loadBootstrap = async () => {
const bootstrap = await import('bootstrap');
window.bootstrap = bootstrap;
};
if (typeof window !== 'undefined') {
loadBootstrap();
}
}, []);
return (
<html lang="en" data-bs-theme="dark">
<head>
<title>HUD | Nextjs Version</title>
</head>
<body>
<AppSettingsProvider>
<Layout>{children}</Layout>
</AppSettingsProvider>
</body>
</html>
);
}
List of components inside the components folder
components/ ├── card/ ├── content/ ├── footer/ ├── header/ ├── nav-scroll-to/ ├── sidebar/ ├── theme-panel/ └── top-nav/
Example of how to change page options in single page
'use client';
import { useEffect } from 'react';
import { useAppSettings } from '@/config/app-settings';
export default function LayoutFullWidth() {
const { updateSettings } = useAppSettings();
useEffect(() => {
updateSettings({ appSidebarNone: true });
return function cleanUp() {
updateSettings({ appSidebarNone: false });
}
// eslint-disable-next-line
}, []);
return (
<>
</>
)
}
List of default options can be set in /config/app-settings.tsx:
const defaultSettings: AppSettings = {
appBoxedLayout: false,
appContentClass: '',
appContentFullHeight: false,
appContentNone: false,
appHeaderNone: false,
appSidebarNone: false,
appSidebarCollapsed: false,
appFooter: false,
appTopNav: false,
};
List of options can be used in single page:
updateSettings({
appBoxedLayout: false,
appContentClass: '',
appContentFullHeight: false,
appContentNone: false,
appHeaderNone: false,
appSidebarNone: false,
appSidebarCollapsed: false,
appFooter: false,
appTopNav: false,
});
File to configure the page sidebar menu
config/ └── app-menu.tsx
Below is the sidebar structures with two level support
const Menu = [
{ is_header: true, title: 'Navigation' },
{ path: '/email', icon: 'bi bi-envelope', title: 'Email',
children: [
{ path: '/email/inbox', title: 'Inbox' },
{ path: '/email/compose', title: 'Compose' },
{ path: '/email/detail', title: 'Detail' }
]
},
{ is_divider: true },
{ is_header: true, title: 'Users' },
];
export default Menu;
The default theme color is set to the teal color. You may change it from /src/styles/_variables.scss
// LINE 100 $theme: $teal !default;
Besides that, you can also set the theme color by adding the css class theme-{ color-name } to /src/app/layout.tsx
// LINE 61 <body className="theme-blue">
<ThemePanel /> component from /src/app/layout.tsx.
Add the 'cover' class to the <html> tag to change the page cover. You can modify the cover image from either /src/scss/images/. Note that both light and dark mode have separate background cover images.
You may add the class to the /src/app/layout.tsx as well.
<html className="bg-cover-2"> <html className="bg-cover-3"> <html className="bg-cover-4"> <html className="bg-cover-5"> <html className="bg-cover-6"> <html className="bg-cover-7"> <html className="bg-cover-8"> <html className="bg-cover-9">
Starting from HUD version 2.0, we have implemented a default dark mode theme that is applied to the /src/app/layout.tsx.
This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.
If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag.
This will disable the default dark mode and enable the light mode theme.
Please note that once you remove the data-bs-theme="dark" attribute,
the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.
<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> </html>to
<!DOCTYPE html> <html lang="en"> </html>
With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.
OR
If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.
<div className="card" data-bs-theme="light">
<div className="card-body">
<!-- your component content here -->
</div>
</div>
To enable RTL mode, follow these steps:
/src/styles/_variables.scss file in your code editor.$enable-rtl variable and change its value to true:
$enable-rtl: true;This will enable RTL mode for your application.
Global Variables
The /src/styles/_variables.scss file contains the variables that control the styles of your application.
To edit these variables, navigate to the /src/styles/_variables.scss file in your code editor and modify the values of the variables to suit your needs.
<!-- global variable --> /src/scss/_variables.scss
Dark Mode Variables
The /src/styles/_variables-dark.scss file contains the variables that control the styles for dark mode.
These variables are used in conjunction with the variables in the /src/styles/_variables.scss file to provide different values for light and dark modes.
<!-- dark mode variable --> /src/scss/_variables-dark.scss
We have created the common re-usable card bootstrap component for this template. You may found the card component via /src/components/bootstrap/
//usage
import {
Card,
CardHeader,
CardBody,
CardImgOverlay,
CardFooter,
CardGroup,
CardExpandToggler
} from '@/components/card/card';
<CardGroup>
<Card>
<CardHeader>
...
<CardExpandToggler />
</CardHeader>
<CardBody>...</CardBody>
<CardFooter>...</CardFooter>
<CardImgOverlay>...</CardImgOverlay>
</Card>
</CardGroup>
You may use the default bootstrap data attribute like data-bs-toggle="dropdown" OR use the window.bootstrap function within the useEffect callback.
// usage example
import { useEffect } from 'react';
export default function UiModalNotifications() {
useEffect(() => {
if (typeof window !== 'undefined' && typeof window.bootstrap !== 'undefined') {
new window.bootstrap.ScrollSpy(document.body, {
target: '#sidebar-bootstrap',
offset: 200
});
}
});
}
I've used the following images, icons or other files as listed.
Plugins
Photos