Introduction
AdminLTE React (@adminlte/react) is the official React/Next.js component library that brings the AdminLTE 4 admin template to your app as 30+ typed components — built server-first for the Next.js App Router and React Server Components, with Bootstrap 5.3 styling, dark mode and a ⌘K command palette.
The library wraps AdminLTE 4 (Bootstrap 5.3) the way a React developer expects: you compose a dashboard from a <DashboardLayout> shell, define your sidebar as a typed MenuNode[] array, and drop presentational components like <Card>, <SmallBox> and <InfoBox> into your pages. Most components render on the server; only the interactive parts (sidebar state, color mode, charts, the palette) ship as client components.
Key features
- React Server Components — the layout shell and presentational widgets render on the server; only interactive pieces are marked
'use client'and hydrate in the browser. - 30+ typed components — layout, widgets, forms and tools, all with fully typed props and a typed menu data model (
MenuNode). - Config-light dashboard shell — pass your menu and a few layout flags to
<DashboardLayout>and it wires up the topbar, sidebar, footer and command palette. - Dark mode — Light / Dark / Auto driven by Bootstrap 5.3's
data-bs-theme, persisted tolocalStorageunderlte-theme, with OS-preference tracking onauto. - ⌘K command palette — a searchable navigator built automatically from your sidebar menu.
- No required runtime dependencies — beyond the React/Next peers; heavy plugins (charts, datatable, editor, maps, advanced inputs) are loaded on demand via dynamic
import().
Requirements
| Dependency | Version |
|---|---|
| React / React DOM | 18+ (tested on 19) |
| Next.js | 14+ (App Router) |
| Bootstrap | 5.3 (JS bundle + Icons) |
| TypeScript (recommended) | strict |
Next.js 14+ is required in practice: the sidebar uses next/navigation for active-link detection and the command palette uses the Next router. next is an optional peer dependency, so a plain React (Vite) setup also works for the presentational components.
Install in one line
npm install @adminlte/reactSee the Installation page for the peer dependencies, the CSS import, and the 'use client' notes you need for the App Router.
Links
- Live demo: adminlte.io/themes/next-react
- Repository: github.com/ColorlibHQ/adminlte-react
- npm: @adminlte/react
- AdminLTE: adminlte.io
AdminLTE is available across many stacks — the same template is also offered as official ports for Vue/Nuxt, Laravel, Django, Symfony, Angular and ASP.NET Core.