Install the package, its peer dependencies, and load the stylesheet plus Bootstrap's JavaScript.
1. Install the package
pnpm add adminlte-react
# or
npm install adminlte-react
# or
yarn add adminlte-react2. Install peer dependencies
React and React DOM are required. Next.js is required in practice (the sidebar and command palette use next/navigation).
pnpm add react react-dom nextYou also need Bootstrap Icons (the components reference bi-* classes) and Bootstrap 5.3 JavaScriptfor components that rely on Bootstrap's own behavior (dropdowns, modals, tooltips, toasts). You can load both from a CDN (shown below) or install them from npm:
pnpm add bootstrap bootstrap-icons3. Import the stylesheet
Import the bundled AdminLTE stylesheet once, at the top of your root layout. It includes the Bootstrap 5.3 styles the components need.
import 'adminlte-react/css'
import './globals.css'4. Load Bootstrap JS and icons
Add Bootstrap Icons CSS in the <head>and Bootstrap's JS bundle at the end of <body>. The simplest path is a CDN:
import type { Metadata } from 'next'
import 'adminlte-react/css'
import './globals.css'
export const metadata: Metadata = {
title: 'Dashboard',
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
/>
</head>
<body>
{children}
{/* Required for dropdowns, modals, tooltips, toasts */}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" />
</body>
</html>
)
}If you installed Bootstrap from npm instead, import the bundle from a client component: import 'bootstrap/dist/js/bootstrap.bundle.min.js'.
5. Optional: plugin assets
The chart, map, datatable, editor, and advanced form components load their JS libraries on demand, but you must install those libraries and load their CSS. Only add the ones you use — see Plugins & Dynamic Imports for the full matrix.
# install only what you use
pnpm add apexcharts # <ApexChart>, <SparklineChart>
pnpm add tabulator-tables # <Datatable>
pnpm add quill # <Editor>
pnpm add flatpickr # <InputFlatpickr>
pnpm add tom-select # <InputTomSelect>
pnpm add jsvectormap # <WorldMap>
pnpm add sortablejs # useSortable()With the package installed and the CSS/JS wired up, head to the Quick Start to assemble your first dashboard.