Installation

Install the package with npm, add the React/Next peers, import the stylesheet, and load Bootstrap's JavaScript and Icons. The library is built for the Next.js App Router, so a few client/server notes apply.

1. Install the package

npm install @adminlte/react
# or
pnpm add @adminlte/react

2. Peer dependencies

react and react-dom (18+) are required. Next.js 14+ is required in practice — the sidebar uses next/navigation and the command palette uses the Next router. You also need Bootstrap 5.3 JavaScript (for dropdowns, modals, tooltips, toasts, carousels, offcanvas) and Bootstrap Icons (components use bi-* classes):

npm install react react-dom next
npm install bootstrap bootstrap-icons

3. Optional plugins

Heavy libraries are optional peers, loaded on demand via dynamic import(). Install only the ones for the components you use:

Package	Used by
`apexcharts`	`<ApexChart>`, `<SparklineChart>`
`tabulator-tables`	`<Datatable>`
`quill`	`<Editor>`
`flatpickr`	`<InputFlatpickr>`
`tom-select`	`<InputTomSelect>`
`jsvectormap`	`<WorldMap>`
`sortablejs`	`useSortable()`

Each also needs its own CSS loaded once — see Charts & Plugins for the full matrix.

4. Import the CSS

The package exposes its compiled stylesheet through the ./css export. Import it once at the top of your root layout, alongside Bootstrap Icons:

// app/layout.tsx
import '@adminlte/react/css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import './globals.css'

5. Load Bootstrap's JavaScript

The interactive Bootstrap components (dropdowns, modals, toasts, carousels, offcanvas) need Bootstrap's JS bundle. Load it from a CDN with next/script, or import the bundle in a client component. The CDN approach in your root layout:

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
        />
      </head>
      <body>
        {children}
        <Script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

The presentational components (Card, SmallBox, InfoBox, etc.) are Server Components — no 'use client' needed. Components that use state, refs or browser APIs (DashboardLayout's providers, ApexChart, Datatable, the form plugins, hooks) are already marked 'use client' internally. You only add 'use client' to your own files when you call a hook such as useColorModeContext() directly.

Next step

Wire up the dashboard shell and providers — see Configuration.

AdminLTE 4 · React port Edit on GitHub